在div中嵌入一个svg

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