11

我正在尝试创建一个填充的 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上查看

4

3 回答 3

11

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

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

svg {fill:black; float:left}

演示

于 2013-03-18T10:19:44.077 回答
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; }

我在其中添加了一些浮点数，以便它们“包含”元素。有更好，更优雅的方法可以做到这一点，但它应该有效。

希望这可以帮助。米奇。

于 2013-03-18T10:29:30.963 回答
-1

问题是您没有为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>
于 2014-05-26T10:29:36.133 回答