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 に答える