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

我认为你需要修复你的＆＃34;白色＆＃34;和＆＃34;黑＆＃34;颜色，因为这是掩码中使用的东西。

这是一个有效的示例（代码）。尝试切换＆＃34; white＆＃34;和＆＃34;黑＆＃34; ＆＃34;填充＆＃34;中的颜色和＆＃34;中风＆＃34;属性。

这是我的第一个例子＆＃34; rect＆＃34;：

<?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>

修改

这是另一个使用line的版本（请注意我将填充和描边设置为＆＃34; #ffffff＆＃34;或＆＃34; white＆＃34;制作此蒙版：

<?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>

SVG：在<circle> </circle>上屏蔽图案

1 个答案: