2

現在、多数の要素を含むSVG<pattern>要素を使用する<line>と、一種のテーパーエッジが生じます。これを回避するためにさまざまなCSSスタイルを試しましたが、実際には何も機能しませんでした。ステッチがマスクされた円のコードは次のとおりです。

<?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="500" width="500">
  <defs>
    <pattern id="stripe" patternUnits="userSpaceOnUse" width="20" height="20">
      <line x1="0" y1="0" x2="20" y2="20" />
    </pattern>
    <mask id="mask">
      <rect height="500" width="500" style="fill: url(#stripe)" />
    </mask>
    <style>
      #stripe line {
        fill: white;
        stroke: white;
        stroke-linecap: square;
        stroke-linejoin: miter;
        stroke-width: 10px;
      }
      g {
        mask: url(#mask);
        stroke-linecap: square;
        stroke-linejoin: miter;
      }
      circle {
        fill: green;
      }
    </style>
  </defs>
  <g>
    <circle cx="250" cy="250" r="200" style="fill: rgba(0, 255, 0, 0.2);" />
  </g>
</svg>

そして、これがどのように見えるかのフィドルです。との組み合わせはありませstoke-linecapんstroke-linejoin。<path>代わりに、マスク全体にフルを描画する必要がありますか？

助けてくれてありがとう。

4

4 に答える 4

8

この答えは2年遅れていないことは知っていますが、別の問題を調査しているときにこの質問に出くわし、遭遇する可能性のある人のために2セントを投入すると思いました。

ここでの問題は、Duopixelによって強調されているとおりです。つまり、パターンが正しくタイリングされません。

あなたの解決策は確かに2つの非タイリングパターンをオーバーレイして非タイリングコーナーを隠すことで問題を覆い隠しますが、パターンを広くして互いにオフセットした線を追加し、それらがコーナーのコーナーと重ならないようにオフセットする場合タイルは、機能するパターンを作成できます。コーナーに問題なく、これでストローク幅を完全に上げることができます。

<pattern id="stripe" patternUnits="userSpaceOnUse" width="40" height="20">
  <line x1="-10" y1="0" x2="10" y2="20" />
  <line x1="10" y1="0" x2="30" y2="20" />
  <line x1="30" y1="0" x2="50" y2="20" />
</pattern>

このフィドルを見る

私は実際に元の問題によって作られたパターンが好きです！私はどこかでそれの使用法を見つけなければならないかもしれません:)

于 2014-03-14T10:01:32.350 に答える
6

ウー！なんて乗るんだ。

Duopixelの答えを見た後、私はトレイルを始めました。パターンに適用されるバウンディングボックスを理解するまで、この効果を実現できるかどうかはわかりませんでした。

グーグルは私をこのメーリングリストの回答に導きましたが、最初は元の作者が洞察を得て戻ってくるまであまり意味がありませんでした（申し訳ありませんが、リンクが多すぎます）。私は答えを振り返り、この問題を解決する可能性を見ました。

解決策：
2つのパターンを正しい座標で重ね合わせる必要があります。

コード:(デモ-http://jsfiddle.net/66UDU/） 

<?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="500" width="500">
  <defs>
    <pattern id="stripe1" class="stripe" patternUnits="userSpaceOnUse" width="20" height="20">
      <line x1="0" y1="0" x2="20" y2="20" />
    </pattern>
    <pattern id="stripe2" class="stripe" patternUnits="userSpaceOnUse" x="6" y="6" width="20" height="20">
      <line x1="0" y1="0" x2="20" y2="20" />
    </pattern>
    <mask id="mask">
      <rect height="500" width="500" style="fill: url(#stripe1)" />
      <rect height="500" width="500" style="fill: url(#stripe2)" />
    </mask>
    <style>
      .stripe line {
        fill: white;
        stroke: white;
        stroke-width: 4px;
      }
      g {
        mask: url(#mask);
      }
      circle {
        fill: rgba(0, 255, 0, 0.25);
      }
    </style>
  </defs>
  <g>
    <circle cx="250" cy="250" r="200" />
  </g>
</svg>

=）

于 2012-08-15T16:14:49.353 に答える
3

それは興味深い問題です。ラインキャップの問題のように見えますが、実際の問題は、パターンのラインコーナーが座標の外側にあることです。何が起こっているのかを理解するための図を次に示します。

ここに画像の説明を入力してください

でパターンを大きくする <pattern id="stripe" patternUnits="userSpaceOnUse" width="30" height="30">か、線の座標を移動することができます。大まかな検索では、パターンをオーバーラップさせたりオーバーフローを表示したりするディレクティブは見つかりませんでしたが、他の誰かが回避策を知っている可能性があります。

于 2012-08-15T01:20:05.663 に答える
0

投稿は古いですが、解決策を探しているときに、誰かが私のような別の解決策を必要としている可能性があります。前述のように、斜めのパターンには問題があります。そのため、直線の水平線パターンを作成し、それをで変換しましたpatternTransform="rotate(45)"。<line />その場合、2つの重複するものではなく、1つだけが必要です。

例：

<pattern id="stripe45" className="stripe-pattern" patternUnits="userSpaceOnUse" patternTransform="rotate(45)" width=".2" height=".2">
      <line x1="0" y1=".1" x2=".2" y2=".1" />
    </pattern>
于 2020-03-02T14:32:49.713 に答える