是否可以从右上角而不是左上角分配svg图案填充的起点?
例如,CSS有background-position
但我找不到允许相同功能的SVG替代方案。
以下是我尝试使用SVG模式填充实现的CSS示例:https://jsfiddle.net/19bc20p6/
这就是我对SVG的了解:https://jsfiddle.net/56cp4xwh/
答案 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;
x
元素的y
和<pattern>
属性有效地设置了模式的来源。要将其设置在右上角,您可以像我在此处一样将其设置为x="100%" y="0%"
。
答案 1 :(得分:0)
是否可以从右上角而不是左上角分配svg图案填充的起点?
用于此用途transform:rotate(0deg);
我认为它的工作