1

SVG での 2 つの同一の四角形の視覚化に問題があります。両方とも同じサイズで同じ位置にあり、下が黒、上が白です。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC  "-//W3C//DTD SVG 1.1//EN" 
                      "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
    <!ENTITY ns_svg   "http://www.w3.org/2000/svg">
    <!ENTITY ns_xlink "http://www.w3.org/1999/xlink">
]>
<svg  version="1.1" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" width="34.017"
      height="70.877" viewBox="0 0 34.017 70.877">
<g id="top_x5F_middle">
    <rect x="11" y="10" fill="black" width="11" height="31"/>
    <rect x="11" y="10" fill="white" width="11" height="31"/>
</g>
</svg>

それらをビューアー (Firefox ブラウザーまたは Inkscape エディター) で表示すると、小さな境界線が表示されます。境界線はズーム レベルごとに異なるため、float の精度に問題があるように見えます。

Inkscape で表示するときの境界線 firefoxで見るときのボーダー

この国境の理由は何ですか？それを取り除く方法は？

PS: 底の長方形を小さくするなどのハックには興味がありません。これは単なる例です。実際の使用例ははるかに複雑で、サイズ変更では解決できません。

4

1 に答える 1

3

これはアンチエイリアシングにかかっています。最初の長方形が描画されると、背景とブレンドされてわずかに汚れます。2番目も同じなので、グレーのアウトラインが得られます.

これを回避したい場合、1 つの方法はshape-rendering="crispEdges" を使用してアンチエイリアスを無効にすることです。

于 2012-04-25T11:06:37.967 に答える