I created a radial plot with d3 and I want to clip the text that is on top of the path. However, to get the text over the road, it needs to be translated and rotated.
The first image in this codex shows the path with the text that was rotated and translated overlaid; I want to clip the text to a path below it.
The second image shows what happens when I do this; clipPath (which is just a reference to the path to svg) undergoes the same transformation that was applied to the text, so it is tilted and shifted to the right instead of being in the same place as the arc to which it refers.
The third image shows what I want. However, I achieved this by inverting the conversion applied to the text and applying it to clipPath, for example:
<clipPath id="clipfix" transform="translate(-30,0)rotate(-30)">
I can solve my problem by doing this, but it seems a bit ridiculous. In my actual drawing, I have many paths and a lot of text. Is there a better way to copy my text to the path below, or did I get the correct answer and just have to accept the ugliness?
Below is the full text of the demo SVG:
<svg width=1000 height=1000>
<g transform="translate(20,200)">
<path d="M0,-150A150,150 0 0,1 150,0L100,0A100,100 0 0,0 0,-100Z"
style="fill: #ffffff; stroke: #000000;"></path>
<path d="M150,0A150,150 0 0,1 0,150L0,100A100,100 0 0,0 100,0Z"
style="fill: #ffffff; stroke: #000000;"></path>
<text transform="rotate(30)translate(30,0)">The first thing to know about Schnauzers</text>
<text transform="rotate(-45)translate(30,0)">I once met a cactus that could talk</text>
</g>
<g transform="translate(320,200)">
<path d="M0,-150A150,150 0 0,1 150,0L100,0A100,100 0 0,0 0,-100Z"
id="path3" style="fill: #ffffff; stroke: #000000;"></path>
<path d="M150,0A150,150 0 0,1 0,150L0,100A100,100 0 0,0 100,0Z"
id="path4" style="fill: #ffffff; stroke: #000000;"></path>
<clipPath id="clip">
<use xlink:href="#path3"></use>
<use xlink:href="#path4"></use>
</clipPath>
<text transform="rotate(30)translate(30,0)"
clip-path="url(#clip)">The first thing to know about Schnauzers</text>
<text transform="rotate(-45)translate(30,0)"
clip-path="url(#clip)">I once met a cactus that could talk</text>
</g>
<g transform="translate(550,200)">
<path d="M0,-150A150,150 0 0,1 150,0L100,0A100,100 0 0,0 0,-100Z"
id="path5" style="fill: #ffffff; stroke: #000000;"></path>
<path d="M150,0A150,150 0 0,1 0,150L0,100A100,100 0 0,0 100,0Z"
id="path6" style="fill: #ffffff; stroke: #000000;"></path>
<clipPath id="clipfix" transform="translate(-30,0)rotate(-30)">
<use xlink:href="#path5"></use>
<use xlink:href="#path6"></use>
</clipPath>
<text transform="rotate(30)translate(30,0)"
clip-path="url(#clipfix)">The first thing to know about Schnauzers</text>
<text transform="rotate(-45)translate(30,0)"
clip-path="url(#clipfix)">I once met a cactus that could talk</text>
</g>
</svg>