動的なSVGグラフィックで一定の境界線

Question

SVGファイル内のすべての場所を取る長方形が必要です。また、境界線（3pxストローク幅）を持つ必要があります。グラフィックのサイズは、（ "svg"ノードの属性 "width"と "height"を変更することによって）簡単に変更可能でなければなりません。

はそれが可能です：私はこのようなものが必要

：私は以下のような構成を思い付いた：

<svg width="150" height="35" > 
    <g> 
    <rect 
     id="rect6648" 
     style="fill:#ffffff; fill-opacity:1; stroke:#000000; stroke-width:3;" 
     x="0" 
     y="0" 
     width="100%" 
     height="100%" /> 
    </g> 
</svg> 

しかし、それは汚れたボーダーと、次の画像を生成します全く？前に述べたように、グラフィックの任意のサイズで動作する必要があります。

ありがとうございます！

Answer 1

Alas、いいえ、少なくとも純粋に宣言的なSVGはありません。シェイプ上のストロークは、そのシェイプを定義する幾何学的線​​の両側に描画されます（あなたの場合、両側に1.5があります）。そのため、ビューボックス全体を塗りつぶす図形のためにクリップされます。

どのような状況でこれを使用していますか？あなたはそれをスクリプトすることができるはずです：ビュー弓のサイズを取得し、rect xとyをストローク幅/ 2、幅を幅 - ストローク幅、高さをストローク幅に設定します。動的コンテキストでは、サイズ変更を検出する必要がありますが、それは可能な場合が多いです。

Answer 2

レクタングルをx="0.5" y="0.5"のような半分のピクセル座標に配置する必要があります。境界線がぼやけることはありません。また、矩形のCSSにvector-effect:non-scaling-strokeを追加して、ズームレベルに関係なくボーダーが常に3ピクセル幅になるようにします。