svg举例

最新推荐文章于 2024-08-17 16:09:41 发布

zbird1988

最新推荐文章于 2024-08-17 16:09:41 发布

阅读量832

点赞数

分类专栏：矢量绘图文章标签： svg

本文链接：https://blog.csdn.net/zbird1988/article/details/17918345

版权

矢量绘图专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.实心矩形

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>

</svg>

2.实心矩形设置透明度

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<rect x="0" y="0" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
opacity:0.5"/>

</svg>

3.圆角矩形+文字

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<rect x="0" y="0" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>

<text style="fill:blue;font-size:24pt" x="50" y="50">Hello World!</text>
</svg>