div内のSVGストロークの問題

Question

div内にSVGを描画して入力する必要があります。 SVGにstrokeが設定されている場合は、divの外に描画されます。

svgとwidth=100%は、ストロークの幅を考慮していません。 SVGは、アカウントのストローク幅を考慮して、親を埋めるようにする方法

.shape { 
 
    border: 1px solid blue; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 
svg { 
 
    overflow: hidden; // IE11 has 'visible' as default 
 
}

<div class="shape"> 
 
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" preserveAspectRatio="none" stroke="red" stroke-width="20" viewBox="0,0,100,50"> 
 
    <polygon points="0,50 100,50 50,0" /> 
 
    </svg> 
 
</div>

？

それはこのようなものでなければなりません：これは、任意のSVGのために働く必要があり

、三角形は一例です。

たとえば、Chromeでブラウザの開発ツールを開いている場合、polygonにカーソルを合わせると、ストロークを考慮した境界ボックスが表示されます。私はそれがウェブブラウザにしか利用できないのか、それともコードでも達成できるのだろうかと思います。それとも正しい方向ではないかもしれません。

私が試みたもう一つのことは、<img>を使用してSVGを読み込みます。同じ結果。

Answer 1

この例ではポリゴンポイントを変更する必要があるようです。

ここに何か不足していますか？

.shape { 
 
    border: 1px solid blue; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 
svg { 
 
    overflow: hidden; // IE11 has 'visible' as default 
 
}

<div class="shape"> 
 
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" preserveAspectRatio="none" stroke="red" stroke-width="15" viewBox="0,0,100,50"> 
 
    <polygon points="10,50 90,50 50,10" /> 
 
    </svg> 
 
</div>