SVG спрайты: для каждого экземпляра preserveAspectRatio - PullRequest
Новая
       29

SVG спрайты: для каждого экземпляра preserveAspectRatio

0 голосов
/ 11 июня 2018

Есть ли способ установить значение preserveAspectRatio для SVG-спрайтов для каждого экземпляра с использованием CSS, HTML или каким-либо другим методом (кроме JavaScript)?

Например (ни один из этихработать): 

<!-- 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>

1 Ответ

0 голосов
/ 11 июня 2018

В 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 задокументирован здесь

...