两个奥秘，或者也许是相同的。下方的所有矩形均已填充图形，已将它们删除以简化描述。
谜题1：给出了#mbfluid的高度，但没有兑现。 #mbfluid矩形应根据#mbsvg的宽度动态增长。因此，谜题＃1就是为什么不尊重身高的原因。
请注意，如果我为CSS中的#mbsvg或#mbfluid中的一个或两个提供了明确的宽度作为属性，则高度仍然不被接受。请注意，＃mbfluid的高度规范的语法与#mbfixed的高度规范完全相同，后者是预期的高度。我期望#mbsvg的宽度与其父代的宽度相同，这没关系...但是在调试器中，据报道#mbfluid具有很大的宽度。但是为其指定宽度似乎并不能固定高度。子奥秘＃1将是如何指定#mbfluid的宽度，以使其从左侧开始10pt，并延伸到包含#mbsvg的右侧边缘。我不认为我可以为此使用CSS calc，因为目前无法通过CSS来指定宽度，而且我也没有找到类似的SVG属性功能。但是，如果高度可以固定，只要宽度足够大，我可能就不会在意它。
谜题2：#mbsvg有几个包含nowrap文本的同级div。我希望#mbsvg与任何较宽的文本都具有相同的宽度。 #mbsvg的多个实例将用于不同的文本行，具有不同的宽度，我正在尝试制作一个可以在这些不同位置工作的#mbsvg。我不知道如何指定CSS来使#mbsvg的大小继承两行文本中较宽的大小。一个javascript解决方案可能会受到预期在页面上（可能是最大页面上的500个）的此类分组的影响，此外，可以使用CSS分别打开和关闭文本行（一个或两个都可见），因此，必须重新运行javascript，并知道哪些可见，才能发现制作#mbsvg的适当大小。该系统已经可以很好地运行，并且具有固定宽度的#mbsvg，但是自适应的#mbsvg使其更具吸引力。
编辑：（关于奥秘＃1）进行更多的实验，尝试使高度更大，并根据需要精确地将其显示大10倍。但是this link表示x，y，height和width属性使用父坐标空间，因此这看起来像个bug ...但是，如果这样，它会出现在所有浏览器中（至少IE不会共享所有相同的SVG代码，因为它显示了更宽的#mbsvg，并且没有将#mbfluid裁剪到#mbsvg的边界），因为它们都显示了它。附近唯一的10个因素是视图框的长宽比，尽管更改在链接上说了什么，但这仍然是有影响的，这应该是标准。因此，现在的问题是，如果我能解决此问题，我该如何做才能使它不受浏览器供应商修复此错误的影响（至少，在我看来，它目前看来是一个错误）？
.mbsvg
{
position: relative;
height: 49pt;
background-color: #80ffff;
}
.mbsized
{
height: 100%;
}
.nowrap
{
white-space: nowrap;
}<svg height="0"><defs>
<rect id="r1" x="0" y="0" height="10" width="10" />
<rect id="r2" x="0" y="0" height="10" width="100" />
<rect id="r3" x="0" y="0" height="250" width="85" />
</defs></svg>
<div>
<div class="nowrap">This is some text</div>
<div class="nowrap">This is some other text</div>
<svg class="mbsvg">
<use xlink:href="#r1" fill="red"/>
<svg class="mbfluid" x="10pt" y="16pt" height="17pt"
viewbox="0 0 10 100" preserveAspectRatio="none">
<use xlink:href="#r2" fill="yellow"/>
</svg>
<svg class="mbfixed" x="0" y="16pt" height="17pt" width="10pt"
viewbox="0 0 10 10" preserveAspectRatio="none">
<use xlink:href="#r1" fill="blue"/>
</svg>
<svg class="mbsized"
viewbox="0 0 83 250" preserveAspectRatio="xMidYMid meet">
<use xlink:href="#r3" fill="green"/>
</svg>
</svg>
</div>最佳答案
谜团1：通过将#mbfluid视图框值的宽高比设为1来解决...我可以在#mbfluid的实际内部进行一些改动。编辑我在视图框值中交换了长度和宽度。转过身来，奥秘＃1完全解决了。
谜团2：通过将其包装成表格行并为每个项目使用表格单元格来解决...似乎Firefox（仅）发现#mbsvg满足于其他行的宽度。由于其他浏览器不能提供足够的答案，因此不会被标记为接受。
.mbsvg
{
position: relative;
height: 49pt;
background-color: #80ffff;
}
.mbsized
{
height: 100%;
}
.nowrap
{
white-space: nowrap;
}
.flex > div
{
display: table-row;
}
.flex > div > div
{
display: table-cell;
}
.flex > div > svg
{
display: table-cell;
}<svg height="0"><defs>
<rect id="r1" x="0" y="0" height="10" width="10" />
<rect id="r2" x="0" y="0" height="10" width="100" />
<rect id="r3" x="0" y="0" height="250" width="85" />
</defs></svg>
<div class="flex">
<div><div class="nowrap">This is some text</div></div>
<div><div class="nowrap">This is some other text</div></div>
<div><svg class="mbsvg">
<use xlink:href="#r1" fill="red"/>
<svg class="mbfluid" x="10pt" y="16pt" height="17pt"
viewbox="0 0 10 10" preserveAspectRatio="none">
<use xlink:href="#r2" fill="yellow"/>
</svg>
<svg class="mbfixed" x="0" y="16pt" height="17pt" width="10pt"
viewbox="0 0 10 10" preserveAspectRatio="none">
<use xlink:href="#r1" fill="blue"/>
</svg>
<svg class="mbsized"
viewbox="0 0 83 250" preserveAspectRatio="xMidYMid meet">
<use xlink:href="#r3" fill="green"/>
</svg>
</svg></div>
</div>关于html - 嵌套svg继承的大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27480073/