将SVG嵌套在DIV内

Question

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

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

由于脚本和模板约束，我不能使用<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上查看

- RedBaron

Answer 1

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

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

svg {fill:black; float:left}

演示

- Sowmya

---

没错，浮动的“Svg”就是这个技巧。但是“fill”是“path”的属性，所以我想我会把它留在路径选择器中。 - RedBaron

有人能解释一下为什么原始代码会出错吗？我发现如果我将6全部改成60，问题就消失了，所以这似乎只是小的div/svg才会出现的问题 - 行为非常不一致。 - joeytwiddle

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.

- Michael Giovanni Pumo

---

只是好奇，您能详细说明一下“更优雅的方式”吗？最近我一直在尝试将我的SVG适配到div中，但遇到了很多问题。 - RedBaron

浮动每个元素并不是做这种事情的最佳方式，因为并不总是必要的，但在像这样我不知道发生了什么事情的情况下，通常浮动元素是一个好的快速修复方法，通常可以防止它们相互折叠。希望这样说得清楚吗？此外，根据您的结构，浮动所有内容可能会导致布局问题。 - Michael Giovanni Pumo

没错，全部使用浮点数会是一场灾难。 - RedBaron

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>

- yegor256

---

我遇到了与问题描述中相同的问题。我已经尝试了你提供的解决方案，但它并没有解决这个问题。Sowmya提供的解决方案。 - Peet