SVGはブラウザに表示されません

svgを使用してブラウザに単純なバーを表示しようとしていますが、何らかの理由で表示されません。ここに私が使用しているコードがあります。バーは表示されません。SVGはブラウザに表示されません

<h3>SVG Bar</h3> 
    <svg> 
    <rect with="50" height="200" style="fill: blue"/> 
    </svg>

私は何が欠けていますか？

出典

2016-12-05 martinbshp

タイプミスが：ちょうど、 –

あなたはwidth属性を「with」と書いています。

しかし、たとえタイプミスを修正するには、さらにいくつかの改善することができます：

svg { 
 
border: 1px solid black; 
 
width: 20vw; 
 
height: 20vw; 
 
}

<h3>SVG Bar</h3> 
 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 1000 1000"> 
 
<rect x="0" y="0" width="200" height="500" style="fill: blue"> 
 
</svg>

出典

2016-12-05 13:22:30 Rounin

名前空間はインラインSVGのために必要とされていません...と幅を書く代わりに、バージョンも無意味です。 –

Rouninありがとうございます。私には恥ずべき、うわー、いかに愚か。 – martinbshp

そのポインタ@RobertLongsonをありがとう - 自分のSVGをインラインに含める傾向がないので、私は確かにわかりませんでした。 – Rounin

SVGはブラウザに表示されません

答えて

関連する問題