SVG：掩蓋<circle>上的圖案

Question

嘗試在填充顏色的圓形頂部上獲得細條紋效果，以便將圖案蒙上圓圈頂部。我不太確定我做錯了什麼，但我的代碼似乎接近於正確的。

<?xml version="1.0" standalone="no"?> 
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="200" width="200"> 
    <defs> 
     <pattern id="stripe" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="10"> 
     <g > 
      <line x1="10" y1="0" x2="0" y2="10" /> 
     </g> 
     </pattern> 
     <mask id="mask" maskUnits="objectBoundingBox" maskContentUnits="ObjectBoundingBox"> 
     <rect height="300" width="300" style="fill: url(#pinstripe);" /> 
     </mask> 
     <style> 
     g { 
      mask: url(#mask); 
      stroke: black; 
      stroke-width: 1px; 
      stroke-linecap: butt; 
      stroke-rendering: crispEdges; 
     } 
     circle { 
      fill: green; 
     } 
     </style> 
    </defs> 
    <g> 
     <circle cx="100" cy="100" r="100" /> 
    </g> 
    </svg> 

你可以看看this fiddle有效地什麼也看不到 - 實際查看了一圈，除去mask: url(#mask);風格。

所以我不太確定有什麼問題 - 我只是想在頂部有一個綠色填充和白色條紋的圓圈。任何幫助將被認真感謝！

Answer 1

我認爲你需要修復你的「白色」和「黑色」顏色，因爲這是在面具中使用的。

下面是一個適用於您的代碼的示例。嘗試在「填充」和「筆觸」屬性中切換「白色」和「黑色」顏色。

下面是一個「矩形」我的第一個例子：

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="200" width="200"> 
    <defs> 
    <pattern id="pinstripe" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="10"> 
    <rect x="0" y="0" width="10" height="10" stroke="black" stroke-width="1" fill="white" /> 
    </pattern> 
    <mask id="mask" maskUnits="objectBoundingBox" maskContentUnits="ObjectBoundingBox"> 
     <rect x="0.5" y="0.2" height="300" width="300" style="fill: url(#pinstripe)" /> 
    </mask> 
    <style> 
     g { 
     mask: url(#mask); 
     stroke: black; 
     stroke-width: 1px; 
     stroke-linecap: butt; 
     stroke-rendering: crispEdges; 
     } 
     circle { 
     fill: green; 
     } 
    </style> 
    </defs> 
    <g> 
    <circle cx="100" cy="100" r="100" /> 
    </g> 
</svg> 

編輯：

下面是使用線和另一個版本（請注意，我設置了填充筆劃爲「＃ ffffff「或」white「來製作此面罩：

<?xml version="1.0" standalone="no"?> 
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="200" width="200"> 
     <defs> 
     <pattern id="pinstripe" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="10"> 

      <line x1="10" y1="0" x2="0" y2="10" fill="#ffffff" stroke="#ffffff" /> 
     </pattern> 
     <mask id="mask" maskUnits="objectBoundingBox" maskContentUnits="ObjectBoundingBox"> 
      <rect x="0.5" y="0.2" height="300" width="300" style="fill: url(#pinstripe)" /> 
     </mask> 
     <style> 
      g { 
      mask: url(#mask); 
      stroke: black; 
      stroke-width: 1px; 
      stroke-linecap: butt; 
      stroke-rendering: crispEdges; 
      } 
      circle { 
      fill: green; 
      } 
     </style> 
     </defs> 
     <g> 
     <circle cx="100" cy="100" r="100" /> 
     </g> 
    </svg>​