2

尝试在填充颜色的圆圈顶部获得类似细条纹的效果，以便图案在圆圈顶部被遮盖。我不太确定我做错了什么，但我的代码似乎接近正确的。

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

您可以查看此小提琴以有效地看不到任何东西-实际查看圆圈，删除mask: url(#mask);样式。

所以我不太确定出了什么问题 - 我只是想有一个绿色填充和顶部白色条纹的圆圈。任何帮助将不胜感激！

4

1 回答 1

3

我认为你需要修复你的“白色”和“黑色”颜色，因为这就是面具中使用的颜色。

这是一个有效的示例（您的代码）。尝试在“填充”和“描边”属性中切换“白色”和“黑色”颜色。

这是我的第一个“rect”示例：

<?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”或“白色”来制作此蒙版： ​</p> 

<?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>​
于 2012-08-02T22:54:54.130 回答