SVG 精灵:每个实例保留纵横比

Question

有没有办法使用 CSS、HTML 或其他方法(除了 JavaScript(在每个实例的基础上为 SVG 精灵设置preserveAspectRatio的值？

例如(这些似乎都不起作用(：

<!-- inline html on <svg> -->
<svg preserveAspectRatio="xMinYMin">
<use xlink:href="/svg/icon.svg">
</svg>

.

<!-- inline html on <use> -->
<svg>
<use xlink:href="/svg/icon.svg" preserveAspectRatio="xMinYMin">
</svg>

.

<!-- inline css nested in <svg> -->
<svg>
<style>svg { preserveAspectRatio: xMinYMin; }</style>
<use xlink:href="/svg/icon.svg">
</svg>

.

<!-- inline css nested in <use> -->
<svg>
<use xlink:href="/svg/icon.svg">
<style>svg { preserveAspectRatio: xMinYMin; }</style>
</use>
</svg>

.

<!-- head/external css -->
<style>
.icon,
.icon svg {
preserveAspectRatio: xMinYMin;
}
</style>
<svg class="icon">
<use xlink:href="/svg/icon.svg">
</svg>

Answer 1

在 SVG 1.1 中，您只能使用<image>元素来引用完整的文件。SVG 2 放宽了这一点，以便<use>元素可以指向完整的文件，但我不确定是否有任何 UA 已经实现了这一点。

对于图像元素，您将这样做...

<svg>
<image width="100" height="100" xlink:href="/svg/icon.svg#svgView(preserveAspectRatio(none slice))">
</svg>

在 SVG 1.1 中，图像必须使用宽度和高度。此处记录了 svgView 语法