htmlのimgタグで使用されるsvgのサイズを変更するには？

今日、私はSVGを学び、HTMLでそれを使用し始めました。次のようにhtmlのimgタグで使用されるsvgのサイズを変更するには？

だから、私はSVGでファイルを作成：

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    viewbox="0 0 400 200"> 
    <path d = "M0,100 L100,100 L125,50 L175,150 L225,50 L275,150 L300,100 L400,100" 
      style=" 
       stroke: #000000; 
       stroke-width: 5; 
       fill: none; 
       " 
    /> 
</svg>

は、それから私は、イメージとしてHTMLでそれを使用しようとしました：

<!DOCTYPE html> 
<html> 
    <head> 
     ..... 
    </head> 
    <body> 

     <div class="menu"> 
      <ul> 
       <li class="menu-item"><a href="#"><img src="svg/mysvg.svg" height="48" width="48"></img></a></li> 
       <li ...... /> 
       <li ...... /> 
       <li ...... /> 
      </ul> 
     </div> 

    </body> 
</html>

しかし、私はそのサイズを変更しないようにSVGを見ることができません。私の間違いは何ですか？誰かが私を正しい方向に向けることができますか？

出典

2016-12-01 Vishal

'viewbox'を' viewBox'に変更し、それが役立つかどうか確認してください。 –

@skamamishossifrageはい、それは魅力のように機能します。 – Vishal

@ squeamishossifrage答えを答えにしてください... –

viewBoxは、小文字のbで書かれています。その結果、このパラメータはブラウザによって認識されません。 viewBox属性のないSVGでは、すべての長さがピクセルであるとみなされるため、SVGのサイズ変更は効果を持ちません。

viewboxをviewBoxに変更すると、SVGのサイズがSVGのサイズと一致するようにSVGがスケーリングされます（通常の埋め込みイメージとほとんど同じです）。

出典

2016-12-02 04:56:49

私のコードをデバッグする時間をとってくれてありがとうございます。\ – Vishal

だからこそ、私はうまく動作しませんでした！ありがとうございました！ – some

htmlのimgタグで使用されるsvgのサイズを変更するには？

答えて

関連する問題