web-dev-qa-db-ja.com

なぜSVGストローク幅：1は線を透明にするのですか？

私はsvgで株価チャートを作成しています。パス要素のストローク幅を1に設定すると問題が発生します。線をより細くする代わりに、stroke-width：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は、「緑」、「赤」、または「黒」のいずれかとして事前に決定される文字列変数です。

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

svgwidthtransparentstroke
29
MattL922

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

28
tdammers

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

別の方法は、CSSを行に適用することです：

.thelines{
    shape-rendering:crispEdges
}

形状レンダリングプロパティの仕様の章

58
Spadar Shut

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

したがって、描画するものはすべて、2つのグリッド線の間の真ん中にあります。ストローク幅が1になる線は、左半分のピクセルと左半分のピクセルを持ちますが、どちらも中央からです。結果として、希望どおりの太さのラインが作成されます：1ピクセル...

例：

<g transform="translate(0.5,0.5)">
 <g>
   <path />
   <path />
 </g>
 <g>
   <path />
   <path />
 </g>
</g>
17
hetOrakel

D3jsの場合は、以下のスタイル属性をd3要素に追加してみてください。

.style('shape-rendering','crispEdges')

これにより、ラインが細くなります。

CSSで同じことを実現したい場合は、以下のスタイルを追加します。

.the_Line_CLass{
  shape-rendering: crispEdges;
}
3
Gil Baggio

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

私が見る問題は、線の1つが1 pxオフセットされているため、線が形状の中心から同じ距離にないことです。ほとんどの状況ではそれはおそらく受け入れられますが、それができない場合もあります。

別のオプション：

  • 2pxのストローク幅を使用します（1pxを外側にレンダリングし、1pxを図形の内側にレンダリングします）
  • シェイプをクリップパスとしてそれ自体に適用します（外側の1pxのレンダリングを削除します）
2
Codepunkt

修正：

<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

0
cwtuan