SVG спрайты: для каждого экземпляра preserveAspectRatio
Есть ли способ установить значение 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 ответ
Решение
В 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 документирован здесь