31

svg で株価チャートを作成していますが、パス要素のストローク幅を 1 に設定すると問題が発生します。線をより狭くする代わりに、ストローク幅:2 と同じサイズにします。でも少し透けます。評判ポイントが足りないので画像は載せられませんが…

私のsvgタグは次のようになります：

<div style="height:300px; width:400px; overflow:hidden">
<svg style="position:relative" height="10000" width="10000" version="1.1" xmlns="http://www.w3.org/2000/svg">
</svg>
</div>

そして、javascript/jquery を使用してパス要素を動的に追加しています。

var shape = document.createElementNS("http://www.w3.org/2000/svg", "path");
$(shape).attr({"d":"...",
               "fill":"none",
               "stroke":color,
               "stroke-width":"1"});
$("svg").append(shape);

パスのd属性の値はちょっと長いので省略しました。また、color「緑」、「赤」、または「黒」のいずれかとして事前に決定される文字列変数です。

これを引き起こしているコードに何か問題がありますか、それとも別の問題ですか?

4

6 に答える 6

59

線が水平または垂直の場合は、 のように線を半ピクセルずらして配置しx="1.5px"ます。

もう 1 つの方法は、いくつかの CSS を行に適用することです。

.thelines{
    shape-rendering:crispEdges
}

形状レンダリング プロパティに関する仕様の章。

于 2011-09-15T19:35:03.457 に答える
29

これはおそらく、ほとんどの SVG 実装で適用されるアンチエイリアスによるものです。線幅が 1 に近いかそれ以下になると、アンチエイリアシングにより、半分覆われたピクセルが部分的に不透明にレンダリングされます。デフォルトの変換とビューポートが配置されている場合、1 ピクセルの線はおそらく 2 つの物理ピクセルの境界線上に正確に位置するため、それぞれが半分覆われ、全体の透明度が 50% になります。白い背景に黒い線があると、50% のグレーになります。

于 2011-09-13T11:55:33.123 に答える
21

少し遅いかもしれませんが、これの本当の理由は、無限に小さいグリッド線に描画すると、ストローク幅 1 の線がグリッドから左右 (または上/下) の半分のピクセルとしてレンダリングされるためです。ライン。これを解決するには、transform 0.5,0.5 を使用してすべてのオブジェクトの周りにグループを追加し、すべてがグリッド ラインの半分だけシフトされるようにしました。

したがって、描画するものはすべて、2 つのグリッド線のちょうど真ん中になります。ストローク幅 1 の線は、左に半ピクセル、左に半ピクセルになりますが、どちらも中央からです。希望通りの太さの線が得られます: 1 ピクセル...

例：

<g transform="translate(0.5,0.5)">
 <g>
   <path />
   <path />
 </g>
 <g>
   <path />
   <path />
 </g>
</g>
于 2012-09-19T21:02:42.230 に答える
2

user616586 による回答は問題ないようです。

私が見る問題は、線の1つが1ピクセルずれているため、線が形状の中心から同じ距離にないことです。ほとんどの場合、これで問題ありませんが、そうでない場合もあります。

別のオプション：

  • 2px のストローク幅を使用します (1px をシェイプの外側にレンダリングし、1px をシェイプの内側にレンダリングします)。
  • 形状をクリップ パスとしてそれ自体に適用します (外側の 1px のレンダリングを削除します)
于 2013-03-08T08:52:04.453 に答える
0

修理：

<line
  x1="10" y1="1"
  x2="90" y2="1.0001" // hack: horizontal line in SVG not visible in Chrome
  stroke="#FF0000"
  strokeWidth="1"/>

参照: http://code.tonytuan.org/2016/09/svg-horizo​​ntal-line-not-visible-in.html

于 2016-09-13T07:32:52.263 に答える