単一の色、画像、またはグラデーションではなく、可能であれば斜めのハッチングパターンで SVG 形状を塗りつぶすにはどうすればよいでしょうか。
2 時間経過しましたが、何も見つかりませんでした (少なくとも 2005 年以降)。
ハッキングの可能性は、塗りつぶしとして機能するハッチングされた PNG になると思いますが、それは理想的ではありません。
78886 次
11 に答える
142
インターネット上でも斜めのハッチングに関するものは何も見つからなかったので、ここで私の解決策を共有します:
<pattern id="diagonalHatch" patternUnits="userSpaceOnUse" width="4" height="4">
<path d="M-1,1 l2,-2
M0,4 l4,-4
M3,5 l2,-2"
style="stroke:black; stroke-width:1" />
</pattern>
(パス式の小文字の「l」に注意してください)
上記は、左下から右上に 4 ピクセル離れた対角線でハッチングを作成します。対角線 ( M0,4 l4,-4) のほかに、パターン領域の左上端と右下端もストロークする必要があります。そうしないと、正方形のエッジと交差する場所でクリッピングが発生して線が「収縮」するためです。
このパターンで四角形を塗りつぶすには、次のようにします。
<rect x="0" y="0" width="100%" height="100%" fill="url(#diagonalHatch)"/>
于 2013-01-24T11:17:20.743 に答える
81
垂直 (または水平) の線分を回転するには、patternTransform 属性を使用します。この方法はシームレスにタイル化され、可能な限り単純なパスを使用します。パターンwidthアトリビュートは、平行なハッチングがどれだけ近いかを制御します。
<pattern id="diagonalHatch" width="10" height="10" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
<line x1="0" y1="0" x2="0" y2="10" style="stroke:black; stroke-width:1" />
</pattern>
于 2014-03-25T18:52:10.017 に答える
16
タグを使用して、必要なものを作成できる場合があります<pattern>。
出発点として、それぞれの MDN docu のこの例を取り上げることができます。
<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="Triangle"
width="10" height="10"
patternUnits="userSpaceOnUse">
<polygon points="5,0 10,10 0,10"/>
</pattern>
</defs>
<circle cx="60" cy="60" r="50"
fill="url(#Triangle)"/>
</svg>于 2012-10-25T13:28:43.253 に答える
15
http://bl.ocks.org/jfsiii/7772281のこのコードは、非常にクリーンで再利用可能のようです。
svg {
width: 500px;
height: 500px;
}
rect.hbar {
mask: url(#mask-stripe)
}
.thing-1 {
fill: blue;
}
.thing-2 {
fill: green;
} <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>SVG colored patterns via mask</title>
</head>
<body>
<svg>
<defs>
<pattern id="pattern-stripe"
width="4" height="4"
patternUnits="userSpaceOnUse"
patternTransform="rotate(45)">
<rect width="2" height="4" transform="translate(0,0)" fill="white"></rect>
</pattern>
<mask id="mask-stripe">
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-stripe)" />
</mask>
</defs>
<!-- bar chart -->
<rect class="hbar thing-2" x="0" y="0" width="50" height="100"></rect>
<rect class="hbar thing-2" x="51" y="50" width="50" height="50"></rect>
<rect class="hbar thing-2" x="102" y="25" width="50" height="75"></rect>
<!-- horizontal bar chart -->
<rect class="hbar thing-1" x="0" y="200" width="10" height="50"></rect>
<rect class="hbar thing-1" x="0" y="251" width="123" height="50"></rect>
<rect class="hbar thing-1" x="0" y="302" width="41" height="50"></rect>
</svg>
</body>
</html>于 2014-07-09T00:10:19.830 に答える
7
次の 2 つのリソースは非常に役立ちます: https://bocoup.com/weblog/using-svg-patterns-as-fills https://github.com/iros/patternfills/blob/master/public/patterns.css
例えば：
<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'>
<rect width='10' height='10' fill='red'/>
<path d='M-1,1 l2,-2
M0,10 l10,-10
M9,11 l2,-2' stroke='orange' stroke-width='2'/>
</svg>
于 2015-12-22T18:07:52.723 に答える
0
<defs>
<pattern id="diagonalHatch" patternUnits="userSpaceOnUse" width="4" height="4">
<!-- background -->
<path id="background"
d="M-1,3 L3,-1
M1,5 L5,1" style="stroke:pink; stroke-width:10" />
<!-- hatches -->
<path id="hatches"
d="M-2,2 L2,-2
M0,4 L4,0
M2,6 L6,2" style="stroke:red; stroke-width:1" />
</pattern>
</defs>
このパターンには、背景用とハッチ用の 2 つのパスが含まれています。背景色は、次のような JS に対してアドレス指定可能です。
const hatchPath = document.querySelector("path#hatches");
hatchPath.setAttribute('style', "stroke:blue; stroke-width:1")
バックグラウンド パスは、少なくともバックグラウンドでカバーされていないパターンの部分がないように、意図的に広すぎます。一方、ハッチの幅を調整して、線の太さを変更できます。
于 2020-10-30T06:22:28.357 に答える