HTML SVG元素无法正确呈现：

Question

我试图在HTML中显示不同的SVG元素（线条，椭圆，矩形），但面对这个奇怪的元素问题，有时会以模糊的方式显示（像锯条一样的小切口）。我尝试给出不同大小的div和元素，以不同方式定位但似乎没有任何效果，请查看以下示例代码：

<div style="position:absolute; top:17pt; left:37pt; "> 
<svg xmlns="http://www.w3.org/2000/svg"  version="1.1"> 
<line id = "default" x1="0" y1="0" x2="16" y2="272" style="stroke:rgb(0,0,0); stroke-width:7;"/> 
</svg> 
</div>

<div style="position:absolute; top:200pt; left:67pt; "> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
<ellipse cx="83" cy="77" rx="83" ry="77" style="fill:none; stroke-width:3;stroke: rgb(0,0,0);stroke-dasharray:15, 4, 4, 4, 4, 4"/> 
</svg> 
</div> 

你可以找到 Fiddle here ..我做错了什么或是一些内部svg问题。万一，你没有在浏览器中遇到问题，我也附加了一个图像。 （我正在使用Chrome）

Answer 1

您的SVG未分配viewBox。随着浏览器识别SVG的大小有时会出错，只显示部分SVG。 viewBox实际上告诉浏览器它应该实际显示的无限SVG平面的哪个区域。

此外，您必须为div代码添加width和height才能看到SVG：

<div style="position:absolute; top:17pt; left:37pt; width:100px; height: 300px">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-10 -10 100 300">
        <line id="default" x1="0" y1="0" x2="16" y2="272" style="stroke:rgb(0,0,0); stroke-width:7;" />
    </svg>
</div>
<div style="position:absolute; top:200pt; left:67pt; width:200px; height: 200px;">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-10 -10 210 210">
        <ellipse cx="83" cy="77" rx="83" ry="77" style="fill:none; stroke-width:3;stroke: rgb(0,0,0);stroke-dasharray:15, 4, 4, 4, 4, 4" />
    </svg>
</div>

Corrected Fiddle

---

来自评论的this fiddle中的“怪异输出”：

假设您是浏览器。你应该绘制一条从0,0到0,50的线（为了简单起见，我们使用一条垂直线。结果对于你的线的旋转模数是相同的）。所以你转到0,0并开始绘图，但是用户也指定了stroke-width: 7，所以实际的行将在-3.5,0和3.5,0之间，以产生一条宽度为7的行。

在下一步中，您应用已设置的viewBox，这样就可以丢弃矩形0,0到100,100之外的任何内容。特别是这会消除你刚绘制的半行，因为这一半不在给定的viewBox范围内。

对于浏览器中的用户，您似乎已经绘制了一条宽度为3.5而不是7的行，但您只是完成了用户要求您执行的操作...