Question

我正在尝试学习如何使用HTML5 svg标记。当我在Chrome和Firefox中打开它时

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <svg width="200" height="200">
            <text>Hello World</text>
        </svg>
    </body>
</html>

没有显示任何内容。单击“Inspect Element”后，我看到text元素在svg元素外部有一个默认位置。如何更改svg元素以使其所有后代元素从它们各自的父元素中的点（0,0）开始？

Answer 1

您是否尝试过在SVG元素上将xmlns属性设置为http://www.w3.org/2000/svg？

如果省略该属性，浏览器可能无法将内容检测为SVG。基本上，xmlns属性定义元素的XML名称空间。

Answer 2

SVG元素不会像HTML一样自动布局。必须使用坐标专门定位所有SVG图形元素。

<div class="col-sm-3 text-center"> <input type="radio" id="1" name="multimedia_type_id" value="1"/> <label for="1">Product Shots</label> </div> <div class="col-sm-3 text-center"> <input type="radio" id="2" name="multimedia_type_id" value="2"/> <label for="2">Video</label> </div> <div class="col-sm-3 text-center"> <input type="radio" id="3" name="multimedia_type_id" value="3"/> <label for="3">Printing Materials</label> </div>元素需要指定其起始位置（<text>和x）。如果您未指定它们，则默认为y，它对应于SVG的左上角。

为了解决这个问题，请给出文本元素的起始坐标。

SVG代码的子级在父级

2 个答案: