SVG 图案填充位置从右上角开始，而不是从左上角开始

Question

是否可以从右上而不是左上分配 svg 图案填充的起点？

例如，CSS 有 background-position，但我无法找到允许相同功能的 SVG 替代品。

这是一个 CSS 我试图用 SVG 图案填充实现的示例：https://jsfiddle.net/19bc20p6/

这就是我对 SVG 的了解：https://jsfiddle.net/56cp4xwh/

Answer 1

是否可以从右上而不是左上分配 svg 图案填充的起点？

for this use transform: rotate(0deg);

我认为它的工作

Answer 2

SVG 中的蓝色面板图案等效如下：

<svg width="50vw" height="100vh">
  <defs>
    <linearGradient id="blue" x1="100%" y1="100%" x2="0%" y2="0%">
      <stop offset="50%" stop-color="skyblue"/>
      <stop offset="50%" stop-color="navy"/>
    </linearGradient>
    <pattern id="panel-one" patternUnits="userSpaceOnUse" width="20" height="20" x="100%" y="0%">
      <rect width="20" height="20" fill="url(#blue)"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#panel-one)"/>
</svg>

<pattern> 元素的 x 和 y 属性有效地设置了图案的原点。要将其设置在右上角，您可以像我在这里所做的那样将其设置为 x="100%" y="0%"。

SVG 图案填充位置从右上角开始，而不是从左上角开始

SVG pattern fill position from top right, instead of top left

html

css

svg

fill