今天,我开始学习SVG并在HTML中使用它.
所以,我在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没有调整大小.我的错是什么？任何人都能指出我正确的方向吗？
问题是viewBox用小写写的b.因此,浏览器无法识别此参数.在没有viewBox属性的SVG中,假设所有长度都以像素为单位,因此调整SVG的大小将不起作用.
如果更改viewbox为viewBox,则SVG将缩放,以使视图框区域与SVG的尺寸匹配(与普通嵌入图像的方式非常相似).
| 归档时间： |
|
| 查看次数： |
3658 次 |
| 最近记录： |