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 的线，但您只是按照用户的要求做了...