SVG反向标记遮罩/剪辑路径

我试图用一个反向遮罩/剪辑路径替换白色三角形marker-start，以便剪切标记形状中的箭头而不是绘画它是白色的。不确定是否可以定义标记遮罩。SVG反向标记遮罩/剪辑路径

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="mySVG" viewBox="-100 0 200 200" height="600" width="700"> 
    <defs> 
    <marker refY="0.5" refX="0.0" markerHeight="4" markerWidth="2" orient="auto" id="head"> 
    <path fill="#D0D0D0" d="M0,0 L0.5,0.5 L0,1 L-0.5,0.5 Z"/> 
    </marker> 


    <marker refY="0.6" refX="0.1" markerHeight="4" markerWidth="2" orient="auto" id="tail"> 
    <clip-Path id="cp1" d="M0 0 V1.3 L0.6 0.6 Z"> 
<path fill="white" d="M0 0 V1.3 L0.6 0.6 Z" /> 
    <clip-Path> 
    </marker> 

</defs> 

<path id="myArrow" marker-start="url(#tail)" marker-end="url(#head)" d="M -66.38265586443396 22.21132594835645 A 70 70 0 0 0 66.38265586443396 22.21132594835645" fill="none" stroke="#D0D0D0" stroke-width="8" clip-path="url(#cp1)"/>

来源

2014-06-30 Amirali

我没有在这里看到任何剪辑路径或掩码代码... –

正如我告诉我，我不知道在哪里以及如何把它完全。我尝试在第二个标记中定义一个剪辑路径，其中“d”的值相同，但不起作用。我现在编辑了代码。 – Amirali

标记是所述路径已经绘制之后被定位，并在该路径中的各个点出来的独立符号。

听起来好像你正在试图用它们去掉一些路径。这是徒劳的。恐怕不是标记如何工作。

来源

2014-06-30 12:16:02

谢谢。我明白了，那么有没有办法将一个路径裁剪掉？ – Amirali

实际上，使用遮罩会更容易。这是一个应该帮助的例子：http://jsfiddle.net/tgw84/1/ –

SVG反向标记遮罩/剪辑路径

回答

相关问题