剪切SVG中的已转换文本

Question

我用d3创建了一个径向图，我想剪切一条路径上的文字。但是，要使文本在路径上方，需要进行翻译和旋转。

The first image in this codepen显示一条路径，其中包含已旋转和翻译的文字;我想要的是将文本剪辑到它下面的路径。

第二张图片展示了当我这样做时会发生什么; clipPath（它只是svg上路径的链接）受到与文本相同的变换的影响，因此它会向右倾斜并向右移动，而不是与它引用的弧位于同一个点上

第三张图片展示了我想要发生的事情。但是，我通过反转应用于文本的变换并将其应用于clipPath来实现这一点，如下所示：

   <clipPath id="clipfix" transform="translate(-30,0)rotate(-30)">

我可以通过这样做来解决我的问题，但这似乎有点荒谬。在我的实际绘图中，我有很多路径和大量文本。有没有更好的方法将我的文字剪辑到它下面的路径，或者我得到了正确的答案，只需要接受丑陋？

演示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>

Answer 1

只需将文本元素包装在一个组中，然后将剪辑应用于该文章。

  <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>
    <g clip-path="url(#clip)">
      <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>