旋转不变的 svg 图案

Question

svg 图案的 patternUnits 属性似乎允许定义用于图案位置的坐标空间。 “userSpaceOnUse”将使用全局坐标系作为图案位置。

我正在寻找类似的旋转属性。我希望所有填充模式哈希的对象全局旋转 45°。在标准实现中，图案的旋转也会受到影响。

这是一个不起作用的示例：

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <defs>
    <pattern id="hashPattern" patternUnits="userSpaceOnUse" width="10" height="10">
      <path d="M 0 0 L 10 10" stroke="red" stroke-width="2" />
    </pattern>

    <g id="yourShape">
      <ellipse cx="25" cy="25" rx="15" ry="25" stroke="black" fill="url(#hashPattern)" />
    </g>
  </defs>

  <use href="#yourShape" x="20" y="20" />
  <use href="#yourShape" x="100" y="20" transform="rotate(45 125 45)" />
  <use href="#yourShape" x="20" y="100" transform="rotate(90 45 125)" />
  <use href="#yourShape" x="100" y="100" transform="rotate(180 125 125)" />
</svg>

我不需要将红线显示为不同的方向，而是需要所有的线显示为相同的校正。

Answer 1

您能做的最好的事情就是复制

<pattern>

并应用

patternTransform

并将其链接到每个形状。

图案是相对于形状而言的，因此它们会随着形状旋转。

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <defs>
    <g id="hashPath">
      <path d="M 0 0 L 10 10" stroke-width="2" />
    </g>

    <pattern id="hashPattern" patternUnits="userSpaceOnUse" width="10" height="10">
      <use href="#hashPath" stroke="red" />
    </pattern>

    <pattern id="hashPattern-45" patternUnits="userSpaceOnUse" width="10" height="10" patternTransform="rotate(-45)">
      <use href="#hashPath" stroke="blue" />
    </pattern>
    <pattern id="hashPattern-90" patternUnits="userSpaceOnUse" width="10" height="10" patternTransform="rotate(-90)">
      <use href="#hashPath" stroke="green" />
    </pattern>
    <pattern id="hashPattern-180" patternUnits="userSpaceOnUse" width="10" height="10" patternTransform="rotate(-180)">
      <use href="#hashPath" stroke="fuchsia" />
    </pattern>

    <g id="yourShape">
      <ellipse cx="25" cy="25" rx="15" ry="25" stroke="black" />
    </g>
  </defs>

  <use href="#yourShape" x="20" y="20" fill="url(#hashPattern)"/>
  <use href="#yourShape" x="100" y="20" transform="rotate(45 125 45)" fill="url(#hashPattern-45)" />
  <use href="#yourShape" x="20" y="100" transform="rotate(90 45 125)" fill="url(#hashPattern-90)" />
  <use href="#yourShape" x="100" y="100" transform="rotate(180 125 125)" fill="url(#hashPattern-180)" />
</svg>