Question

有没有办法使用CSS，HTML或其他一些方法（除了JavaScript）在每个实例的基础上为SVG sprite设置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语法为documented here

SVG sprites：per-instance preserveAspectRatio

1 个答案: