Possibility to rotate svg?

[lindskogaren]

Hi,

Thank you for this excellent tool. I'm trying to figure out a way to rotate the gerber file 90, 180 or 270 degrees but I can't seem to figure out a way to do it. Is there any way to specify a rotation as an input parameter?

I'm using D3 to draw the svg-files in the following manner: scope.dsvg.append('svg') .html($sce.trustAsHtml(gerberToSvg(svgObj)));

However, when using this approach the normal translation/rotation attributes do not work:

scope.dsvg.append('svg') .html($sce.trustAsHtml(gerberToSvg(svgObj))) .attr("rotate("+rotation+")"); //Does not have any effect

I know that this is probably not an issue with this library, but I wasn't sure where else to put it.

Thank you for sharing your excellent work!

[mcous]

Hey, glad you like the tool! Unfortunately, there is no way to specify rotation as a parameter to the conversion function. Additionally, the solution here isn't going to be very pretty (code-wise) because we're already using a translate + scale transform to flip the image (because Gerber y-coordinates are flipped from SVG y-coordinates).

I've never used d3, but I think I have some tips that could help you figure this out:

• It looks to me that the d3 attr method takes two parameters: an attribute name and an attribute value
  • The attribute name is transform
  • The attribute value will probably need to include rotate(${rotation},${xCenter),${yCenter})
• SVG doesn't allow a transform attribute on the root SVG element, so you need to select the first g child of the SVG and apply the transform to that
  • As mentioned above, however, that g child already has a transform attribute to flip the image, so make sure you append the rotate to the existing value rather than replacing it
• You can get the xCenter and yCenter from the viewBox
  • e.g. for a viewBox = [100, 200, 3000, 4000], the center-point would be at x = 100 + (3000 / 2) = 1600, y = 200 + (4000 / 2) = 2200
• In addition to adjusting the transform attribute of the g element, you'll need to manually change the width, height, and viewBox attributes of the root svg element to fit the layer after it is rotated
  • I would take the viewBox of [xMin, yMin, width, height], turn it into four points representing each of the corners of the box ([xMin, yMin, xMin + width, yMin + height]) as well as the center point from above
  • Rotate those points to construct a new viewBox (Google how to rotate a point about another point, there's some good Stack Overflow answers that I used while building the library)
  • The new width and height attributes are simply the width and height values from the new viewBox divided by 1000 with units attached

I also found this d3 transform library (maybe it can help): https://github.com/trinary/d3-transform

[mcous]

Closing because I didn't hear back, so I assume you figured something out. Feel free to re-open if you're still having trouble