0

This could be a fairly common situation.
An SVG drawing has a reoccurring pattern. It's defined in the <defs>

<defs>
    <g id="endTip">
        <circle r="2px" fill="blue"/>   <!-- origin mark for the def for debug purposes -->
        <polyline stroke-width="1px" stroke="black" fill="none" points="0,-4 100,-4 100,4 0,4" />
    </g>
</defs>

then the pattern is stamped onto the drawing with <using>

<use x="250px"  y="15px"  xlink:href="#endTip" />                           <!-- right -->
<use x="-250px" y="-15px" xlink:href="#endTip" transform="scale(-1,1)"/>    <!-- left -->

Furthermore, I want to horizontally flipped (mirror) some of the instances. To achieve that, I'm applying a transform in the <using> element. My intent is to transform the contents of the pattern, but keep unchanged the x and y, which are prescribed in the <using> element. Instead, both the contents and the x and y are mirrored.

enter image description here
(Rendered with Chrome version 44. Green annotations are not the part of SVG.)

What is a good way to flip the contents, but keep the x and y, which are prescribed in the <using> element unflipped?

Nick Alexeev
  • 1,688
  • 2
  • 22
  • 36
  • @PaulLeBeau Thanks for the link to that thread. I have tried your method with `translate(<2 * centreX>,0) scale(-1, 1)`, which you have described in your answer in that thread. It works. In my case, I don't have to flip about the middle, so `<2 * centreX>` becomes `<2 * x>`. But I have to manually calculate and type that in for each instance. – Nick Alexeev Aug 23 '15 at 08:15
  • That will be the case I'm afraid. There is no auto-magic way to flip in place an arbitrary element. – Paul LeBeau Aug 24 '15 at 02:47
  • Except if you're creating the original objects and you take care to draw them all centred on their local coordinate origin. – Robert Longson Aug 24 '15 at 07:08

0 Answers0