SVG transform ＝"rotate(180)".在Safari 11中不起作用 [英] SVG transform="rotate(180)" does not work in Safari 11

问题描述

出于某种原因

<svg width="1000" height="500" transform="rotate(180)">...</svg>

在Safari 11中显示为未旋转.

is shown as not rotated in Safari 11.

Chrome 63可以正确呈现它.

Chrome 63 renders it properly.

出什么问题了?

谢谢！

推荐答案

在SVG 1.1 <svg>元素中不支持转换属性.在SVG 2中，建议它们应该.

In SVG 1.1 <svg> elements did not support transform attributes. In SVG 2 it is proposed that they should.

Chrome和Firefox实现了SVG 2规范的这一部分，Safari尚未实现，而IE11则从未实现.

Chrome and Firefox implement this part of the SVG 2 specification, Safari does not yet do so and IE11 never will.

您可以在不支持SVG 2功能的浏览器中获得相同的结果，方法是将<svg>元素替换为<g>元素，或者在<svg>元素上创建一个<g>子元素，然后将<g>元素上的变换.

You can achieve the same result in browsers that do not support this SVG 2 feature either by replacing the <svg> element by a <g> element or by creating an <g> child element on the <svg> element and putting the transform on the <g> element.

这篇关于SVG transform ＝"rotate(180)".在Safari 11中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！