使用SVG时防止坐标系旋转？答案

【问题标题】：Preventing coordinate system from rotation while using SVG?使用SVG时防止坐标系旋转？
【发布时间】：2015-04-13 05:30:55
【问题描述】：

第一次学习SVG，遇到<defs>、<g>和<use>。我注意到，每当使用<g> 对元素进行分组，然后使用<use> 使用时，如果执行旋转，它将应用于整个坐标系。例如，如果在<use xlink:href="#point" x="105" y="-105" transform="rotate(90 50,50)"/> 上旋转90 度，然后在x="100" 上旋转，svg 图像沿 Y 轴移动。这会造成处理许多图像的混乱。有什么技术可以避免或即兴发挥吗？

	<svg width="500" height="400">
		<defs>
  <g id="point">
        <rect rx="4" ry="4" y="50" width="50" height="50" fill="black"></rect>
        <circle cx="50" cy="50" r="50" fill="black"/>
        <circle cx="50" cy="50" r="5" fill="white"/>
      </g>
</defs>
		<use xlink:href="#point" x="0" y="0" transform="rotate(270 50,50)"/>
		<use xlink:href="#point" x="0" y="-105" transform="rotate(180 50,50)"/>
		<use xlink:href="#point" x="105" y="0" transform="rotate(0 50,50)"/>
		<use xlink:href="#point" x="105" y="-105" transform="rotate(90 50,50)"/>
	</svg>

【问题讨论】：

标签： html svg

【解决方案1】：

这就是野兽的本性。变换的概念甚至超越了应用于整个坐标系。通过进行转换，您可以为元素及其后代建立一个新的坐标系。查看SVG 1.1 spec了解更多详情：

7.4 坐标系变换

一个新的用户空间（即一个新的当前坐标系）可以通过以“变换”形式指定变换来建立容器元素或图形元素上的属性

此外，新的坐标系将是established before 元素的任何其他处理发生：

“transform”属性在处理之前应用于元素为该元素提供的任何其他坐标或长度值。

这意味着转换后的元素或其后代的所有坐标和长度都将引用这个新的坐标系。这是 svg 中的内置机制，据我所知，没有办法绕过它。

根据我的经验，刚开始习惯它可能会有点困难，但一旦你掌握了它，它会让大多数事情变得容易得多。 Sara Soueidan 撰写了一篇优秀且非常全面的 3 部分系列博文，可能会有所帮助：

了解 SVG 坐标系和变换

(Part 1) — 视口、viewBox 和 preserveAspectRatio

(Part 2) — transform 属性

(Part 3) — 建立新视口

【讨论】：