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>
我不需要将红线显示为不同的方向,而是需要所有的线显示为相同的校正。
您能做的最好的事情就是复制
<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>