在 div 中嵌套 svg答案

【问题标题】：nesting an svg inside a div在 div 中嵌套 svg
【发布时间】：2013-03-06 15:22:48
【问题描述】：

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

为了实现这一点，我将 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

【问题讨论】：

标签： html css svg

【解决方案1】：

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

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

svg {fill:black; float:left}

DEMO

【讨论】：

是的，浮动“Svg”可以解决问题。但是“填充”是“路径”的一个属性，所以我想我会把它留在路径选择器中
谁能解释一下为什么原来的中断？我注意到如果我将 6 更改为 60，问题就会消失，所以这似乎只是小型 div/svgs 的问题 - 非常不一致的行为。

【解决方案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; }

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

希望这会有所帮助。米奇。

【讨论】：

只是好奇，你能解释一下“更优雅的方式”吗？我最近在尝试将我的 svg 放入 div 时遇到了很多麻烦
好吧，浮动每个元素并不是做这种事情的最佳方式，因为它并不总是需要这样做，但在这种我不知道完整的情况下在发生的情况下，浮动元素通常是一个很好的快速修复方法，通常可以阻止它们自身塌陷。希望这有意义吗？此外，根据您的结构，浮动所有内容都可能导致布局问题。
是的，漂浮一切将是一场灾难

【解决方案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>

【讨论】：

我遇到了与问题中描述的相同的问题。我已经测试了您的解决方案，但并没有解决问题。 Sowmya提供的解决方案