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 .. 我做错了什么还是一些内部 svg 问题。如果您的浏览器没有遇到问题，我还附上了一张图片。（我正在使用 Chrome）

Answer 1

您的 SVG 没有分配viewBox. 由于浏览器对 SVG 大小的识别有时会出错，因此只会显示 SVG 的一部分。在viewBox实际上告诉了浏览器，无限SVG平面的面积应该实际显示。

此外，您必须给div标签 awidth并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>

修正小提琴

从评论中写到这个小提琴中的“奇怪的输出” ：

假设您是浏览器。你应该画一条从 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 的线，但您只是按照用户要求您做的...