【发布时间】：2015-02-22 17:22:10
【问题描述】：
我想通过 CSS 添加 SVG，而不对 HTML 进行任何更改。
tl;dr:图像应该像文本一样。
图像应该始终具有它添加到的元素的高度（或者更好的是，文本内容），以及根据其纵横比的宽度。元素的height/font-size/font-family 不固定（height未指定，即auto；font-size在em单元中指定，不能依赖特定的默认浏览器字体大小；它不应依赖于特定字体的特性。
图像应添加到标题的左侧（可视地位于标题框内），并且在图像和标题内容之间应始终留有0.5em 的间距。
理想情况下，无论 SVG 文件中指定什么内容（即，svg 元素上的 width/height），它都能正常工作，但我可以编辑 SVG。
这可能吗？
我尝试将其添加为background-image（但如果图像宽度未知，如何获得间距？），作为content 中的伪元素（但如何调整宽度/高度？），以及伪-background-image 中的元素（但如何使其与文本垂直对齐，以及如何在不指定 em 或类似的高度的情况下使其显示？）。
我愿意接受最新浏览器版本支持的任何解决方案。
h1 {font-size:1.5em;}
.foo {
background-image:url("noun_39107.svg");
background-repeat:no-repeat;
background-size:contain;
/* … but how to get a spacing of 0.5em, no matter the size? */
}
.bar::before {
content:url("noun_39107.svg");
margin-right:0.5em;
/* … but how to scale it? */
}
.qux::before {
content:" ";
margin-right:0.5em;
background-image:url("noun_39107.svg");
background-repeat:no-repeat;
background-size:contain;
display:inline-block;
height:1em; width:1em; /* … I don’t know the actual height/width */
vertical-align:middle;
/* … but how to align it vertically so that it’s like text? */
}<h1 class="foo">Foo</h1>
<h1 class="bar">Bar</h1>
<h1 class="qux">Qux</h1>【问题讨论】：