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反向標記遮罩/剪輯路徑

回答

相關問題