SVG 精灵：每个实例的 preserveAspectRatio答案

【问题标题】：SVG sprites: per-instance preserveAspectRatioSVG 精灵：每个实例的 preserveAspectRatio
【发布时间】：2018-11-20 14:55:27
【问题描述】：

有没有什么方法可以使用 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>

【问题讨论】：

元素目前在大多数 UA 中无法指向完整的 SVG 文件。如果有任何用处，我可以通过元素向您展示如何做到这一点。
@RobertLongson - 感谢您的回复；当然，查看方法可能会有所帮助。

标签： css svg svg-sprite

【解决方案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 语法为documented here

【讨论】：

很高兴知道，谢谢。我会关注浏览器的支持。