Сохранить соотношение сторон в Internet Explorer с изображением svg

У меня есть изображение svgz с именем image.scgz с указанной шириной и высотой.

Я хотел бы сделать изображение большого пальца шириной 120 пикселей и сохранить соотношение сторон.

В хроме мне просто нужно написать <img src="image.svgz" style="width:120px;" />

Однако это не работает, т.е. 9 и 10:

  • Прежде всего, мне нужно написать <img src="image.svgz" style="max-width:120px;" /> для масштабирования ширины, и я не понимаю логики.

  • Во-вторых, соотношение сторон не соблюдается.

Я видел решение, использующее атрибут preserveAspectRatio balise svg, но я не хотел бы изменять файлы изображений.


svg css internet-explorer aspect-ratio
person Hentold    schedule 03.11.2013    source источник
comment
Как выглядит файл image.svgz? Есть ли у него атрибут viewBox? Есть ли у него определенная ширина и высота?   -  person Erik Dahlström    schedule 04.11.2013
comment
Он не имеет определенного viewBox, но имеет ширину и высоту. Он генерируется inkspace.   -  person Hentold    schedule 04.11.2013

Ответы (1)


arrow_upward
1
arrow_downward

Вам придется использовать элемент SVG <image>, а не элемент HTML <img>, поскольку элемент SVG <image> может принимать атрибуты saveAspectRatio и viewBox, которые элемент html <img> не поддерживает.

person Robert Longson    schedule 03.11.2013
comment
Я пробовал, но saveAspectRatio, кажется, игнорируется. Вероятно, потому что окно просмотра не определено на моем изображении svg (заполнены только свойства ширины и высоты) - person Hentold; 03.11.2013
comment
Вы должны использовать изображение SVG, а не изображение HML. - person Robert Longson; 03.11.2013