1
SVGを使用してカラーパレットを作成しようとしています。このために、私は多くのrect要素について、それぞれのスタイルを変更するだけです。 問題は時々、この画像のように、素子間の白の小さなスライバーがある、ということである。SVGの矩形要素に小さな隙間が残る
このスナップショットは、OSX上のChromeで撮影されました。 Safariも同様です。
私のコードでは、viewBoxは定数ではなく、四角形の数によって変わります。さらに、幅と高さは、選択された解像度に応じて変わる可能性があります。言い換えれば、私はこれを正しいものにするためにこれらのもので遊ぶことはできません。
私は、必要以上に幅の広い各矩形を作成しようとしましたが、効果は同じでした。上の写真では、一番上の行は100.1の幅を持ち、底は100です。幅を101にすることはできましたが、場合によってはrectの予想幅が1桁になる可能性がありますので、余分な幅の1が重なります。
ストロークを追加しようとしましたが、この作業を行うために必要な幅が、viewBoxとrectサイズに依存していました。
この問題が発生しましたか？
アンチエイリアスだ<html>
<body>
<svg width="1000" height="1000" viewBox="0 0 5000 5000">
<g>
<rect x="0" y="0" width="100.1" height="100" style="fill:rgb(0,0,255)"></rect>
<rect x="100" y="0" width="100.1" height="100" style="fill:rgb(0,0,250)"></rect>
<rect x="200" y="0" width="100.1" height="100" style="fill:rgb(0,0,245)"></rect>
<rect x="300" y="0" width="100.1" height="100" style="fill:rgb(0,0,240)"></rect>
<rect x="400" y="0" width="100.1" height="100" style="fill:rgb(0,0,235)"></rect>
<rect x="500" y="0" width="100.1" height="100" style="fill:rgb(0,0,230)"></rect>
<rect x="600" y="0" width="100.1" height="100" style="fill:rgb(0,0,225)"></rect>
<rect x="700" y="0" width="100.1" height="100" style="fill:rgb(0,0,220)"></rect>
<rect x="800" y="0" width="100.1" height="100" style="fill:rgb(0,0,215)"></rect>
<rect x="900" y="0" width="100.1" height="100" style="fill:rgb(0,0,210)"></rect>
<rect x="1000" y="0" width="100.1", height="100" style="fill:rgb(0,0,205)"></rect>
<rect x="1100" y="0" width="100.1" height="100" style="fill:rgb(0,0,200)"></rect>
<rect x="1200" y="0" width="100.1" height="100" style="fill:rgb(0,0,195)"></rect>
<rect x="1300" y="0" width="100.1" height="100" style="fill:rgb(0,0,190)"></rect>
<rect x="1400" y="0" width="100.1" height="100" style="fill:rgb(0,0,185)"></rect>
<rect x="0" y="100" width="100" height="100" style="fill:rgb(0,0,255)"></rect>
<rect x="100" y="100" width="100" height="100" style="fill:rgb(0,10,250)"></rect>
<rect x="200" y="100" width="100" height="100" style="fill:rgb(0,20,245)"></rect>
<rect x="300" y="100" width="100" height="100" style="fill:rgb(0,30,240)"></rect>
<rect x="400" y="100" width="100" height="100" style="fill:rgb(0,40,235)"></rect>
<rect x="500" y="100" width="100" height="100" style="fill:rgb(0,50,230)"></rect>
<rect x="600" y="100" width="100" height="100" style="fill:rgb(0,60,225)"></rect>
<rect x="700" y="100" width="100" height="100" style="fill:rgb(0,70,220)"></rect>
<rect x="800" y="100" width="100" height="100" style="fill:rgb(0,80,215)"></rect>
<rect x="900" y="100" width="100" height="100" style="fill:rgb(0,90,210)"></rect>
<rect x="1000" y="100" width="100" height="100" style="fill:rgb(0,100,205)"></rect>
<rect x="1100" y="100" width="100" height="100" style="fill:rgb(0,110,200)"></rect>
<rect x="1200" y="100" width="100" height="100" style="fill:rgb(0,120,195)"></rect>
<rect x="1300" y="100" width="100" height="100" style="fill:rgb(0,130,190)"></rect>
<rect x="1400" y="100" width="100" height="100" style="fill:rgb(0,140,185)"></rect>
</g>
</svg>
</body>
</html>