从右上角而不是左上角的SVG图案填充位置

时间:2017-07-21 16:28:14

标签: html css svg fill

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

例如,CSS有background-position但我找不到允许相同功能的SVG替代方案。

以下是我尝试使用SVG模式填充实现的CSS示例:https://jsfiddle.net/19bc20p6/

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

2 个答案:

答案 0 :(得分: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>
&#13;
&#13;
&#13;

x元素的y<pattern>属性有效地设置了模式的来源。要将其设置在右上角,您可以像我在此处一样将其设置为x="100%" y="0%"

答案 1 :(得分:0)

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

  

用于此用途transform:rotate(0deg);

我认为它的工作