0
点赞
收藏
分享

微信扫一扫

SVG 可缩放矢量图形

钎探穗 2022-02-28 阅读 161
xmlscalahtml


SVG Scalable Vector Graphics

SVG 使用 XML 格式定义图像

内嵌使用

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle
cx="100"
cy="50"
r="40"
stroke="black"
stroke-width="3"
fill="red"
/>
</svg>

外部引用

<embed src="circle.svg" type="image/svg+xml" />

示例

1、矩形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect
x="50"
y="20"
width="300"
height="100"
style="fill: rgb(0, 0, 255); stroke-width: 1; stroke: rgb(0, 0, 0);"
/>
</svg>

x 矩形到浏览器窗口左侧的距离

y 矩形到浏览器窗口顶端的距离

width 宽度

height 高度

fill 填充颜色

stroke-width 边框宽度

stroke 边框颜色

2、10 号字

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text fill="#000000" font-size="10" font-family="Verdana" x="0" y="10">
你好
</text>
</svg>

资源

SVG 教程 https://www.runoob.com/svg/svg-tutorial.html

SVG 在线编辑 https://c.runoob.com/more/svgeditor/



举报

相关推荐

0 条评论