html - 在 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>