剪切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>