Question

我正在尝试创建一个填充的svg三角形，它将被放置在页面上的某些位置。

为了实现这一点，我将svg包装在div中并适当地放置div。但是，svg总是在div之外呈现。如何获取div中的svg元素？

由于脚本和模板限制，我无法使用<object>或<embed>标记

示例HTML

<div id="container">
    <div id="inner_container">
        <svg height="6" width="6">
            <path d="M 0 6 L 3 0 L 6 6 L 0 6"/>
        </svg>
    </div>
</div>

和CSS

#container {width:100px; height:25px; border:1px solid green;}
#container #inner_container {width:6px; height:6px; border:1px solid red;}
#inner_container  svg path {fill:black;}

填充三角形应位于红色矩形内，但在

之外呈现

在JsFiddle

上查看

Answer 1

更改css选择器，只写svg{...}并添加float:left

这里的路径只是一个绘图而不是一个元素。

svg {fill:black; float:left}

<强> DEMO

Answer 2

试试这个：

#container { float: left; width: 100px; height: 25px; border: 1px solid green; }
#container #inner_container { float: left; width: 6px; height: 6px; border: 1px solid red; }
#inner_container svg { display: block; float: left; }

我在那里添加一些花车，以便它们'包含'元素。有更好，更优雅的方法来做到这一点，但它应该有效。

希望这会有所帮助。 MIKEY。

Answer 3

问题是您没有为svg元素指定名称空间。这是它的工作原理：

<div id="container">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
    <path d="M 0 6 L 3 0 L 6 6 L 0 6"/>
  </svg>
</div>

在div中嵌入一个svg

3 个答案: