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

Question

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

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

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

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

Answer 1

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>

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