如何在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'，看看是否有帮助。 –

@squeamishossifrage是的，就像一个魅力。 – Vishal

@squeamishossifrage请把你的答案变成答案...... –

问题是viewBox已被写成小写b。结果，该参数不被浏览器识别。在没有viewBox属性的SVG中，所有长度均假定为像素，因此调整SVG大小将不起作用。

如果将viewbox更改为viewBox，则SVG将进行缩放，以使查看框区域与SVG的维度匹配（与普通嵌入图像非常相似）。

来源

2016-12-02 04:56:49

感谢您花时间调试我的代码。\ – Vishal

所以这就是为什么我没有得到它的工作！谢谢！ – some

如何在html中调整img标签中使用的svg大小？

回答

相关问题