如何拆分 svg 矩形?
How to split svg rectangle?
我正在尝试拆分矩形,使其平分。我也不知道是否可以拆分 svg 矩形?
这是svg代码:
<rect x="29" y="239" width="200" height="80" r="8" rx="8" ry="8" fill="#006699" stroke="#337ab7" style="cursor: pointer;" stroke-width="1" transform="matrix(1,0,0,1,0,-120)"></rect>
<text style="text-anchor: middle; font: 13px "Arial"; cursor: pointer;" x="129" y="279" text-anchor="middle" font="10px "Arial"" stroke="none" fill="#ffffff" font-size="13px" transform="matrix(1,0,0,1,0,-120)"><tspan dy="4.5">one</tspan></text>
输出:
但我正在尝试这样创建:
我已经学习了这个教程:
https://www.w3schools.com/graphics/svg_rect.asp
这是我尝试解决但没有得到任何帮助的另一个文档:
https://www.w3.org/TR/SVG/painting.html#FillRuleProperty
其他教程:
如果您在每个过渡点使用多个停止点来创建即时过渡,则可以使用 linearGradient 来显示多种颜色。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 50 300 300">
<defs>
<linearGradient id="MyGradient" x2="0%" y2="100%">
<stop offset="50%" stop-color="green" />
<stop offset="50%" stop-color="white" />
</linearGradient>
</defs>
<rect x="29" y="239" width="200" height="80" r="8" rx="8" ry="8" fill="url(#MyGradient)" stroke="#337ab7" style="cursor: pointer;" stroke-width="1" transform="matrix(1,0,0,1,0,-120)"></rect>
<text style="text-anchor: middle; font: 13px 'Arial' cursor: pointer;" x="129" y="279" text-anchor="middle" font="10px "Arial"" fill="#ffffff" font-size="13px" transform="matrix(1,0,0,1,0,-140)"><tspan dy="4.5">one</tspan></text>
<text style="text-anchor: middle; font: 13px 'Arial' cursor: pointer;" x="129" y="279" text-anchor="middle" font="10px "Arial"" fill="black" font-size="13px" transform="matrix(1,0,0,1,0,-100)"><tspan dy="4.5">one</tspan></text>
</svg>
我正在尝试拆分矩形,使其平分。我也不知道是否可以拆分 svg 矩形?
这是svg代码:
<rect x="29" y="239" width="200" height="80" r="8" rx="8" ry="8" fill="#006699" stroke="#337ab7" style="cursor: pointer;" stroke-width="1" transform="matrix(1,0,0,1,0,-120)"></rect>
<text style="text-anchor: middle; font: 13px "Arial"; cursor: pointer;" x="129" y="279" text-anchor="middle" font="10px "Arial"" stroke="none" fill="#ffffff" font-size="13px" transform="matrix(1,0,0,1,0,-120)"><tspan dy="4.5">one</tspan></text>
输出:
但我正在尝试这样创建:
我已经学习了这个教程:
https://www.w3schools.com/graphics/svg_rect.asp
这是我尝试解决但没有得到任何帮助的另一个文档:
https://www.w3.org/TR/SVG/painting.html#FillRuleProperty
其他教程:
如果您在每个过渡点使用多个停止点来创建即时过渡,则可以使用 linearGradient 来显示多种颜色。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 50 300 300">
<defs>
<linearGradient id="MyGradient" x2="0%" y2="100%">
<stop offset="50%" stop-color="green" />
<stop offset="50%" stop-color="white" />
</linearGradient>
</defs>
<rect x="29" y="239" width="200" height="80" r="8" rx="8" ry="8" fill="url(#MyGradient)" stroke="#337ab7" style="cursor: pointer;" stroke-width="1" transform="matrix(1,0,0,1,0,-120)"></rect>
<text style="text-anchor: middle; font: 13px 'Arial' cursor: pointer;" x="129" y="279" text-anchor="middle" font="10px "Arial"" fill="#ffffff" font-size="13px" transform="matrix(1,0,0,1,0,-140)"><tspan dy="4.5">one</tspan></text>
<text style="text-anchor: middle; font: 13px 'Arial' cursor: pointer;" x="129" y="279" text-anchor="middle" font="10px "Arial"" fill="black" font-size="13px" transform="matrix(1,0,0,1,0,-100)"><tspan dy="4.5">one</tspan></text>
</svg>