SVG 可缩放矢量图形

简介: SVG 可缩放矢量图形

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/

            </div>
目录
相关文章
学习CSS3 中的渐变、阴影与遮罩
CSS3的渐变、阴影和遮罩特性极大地丰富了网页设计。渐变让颜色平滑过渡,赋予页面流动美感;阴影增加元素立体感,引导视觉焦点;遮罩通过隐藏或显示部分元素创造独特视觉效果。这些特性组合使用,可打造丰富多彩、立体生动的视觉体验,并可通过CSS3动画增强动态效果,使网页更具活力。正确应用这些特性需考虑参数调整及跨浏览器兼容性,以确保最佳展示效果。
|
10月前
|
移动开发 前端开发 HTML5
HTML5 Canvas中实现绘制一个像素宽的细线
HTML5 Canvas中实现绘制一个像素宽的细线
80 3
|
11月前
|
前端开发
CSS小技巧之绘制心形图案
CSS小技巧之绘制心形图案
140 0
|
前端开发
通过构建背景图学习CSS径向渐变
通过构建背景图学习CSS径向渐变
85 0
SVG 线性渐变 和 径向渐变
SVG 线性渐变 和 径向渐变
234 0
CSS3文本居中显示、圆形圆角绘制、立体阴影效果设置实例演示
CSS3文本居中显示、圆形圆角绘制、立体阴影效果设置实例演示
177 0
|
XML 图形学 数据格式
SVG 可缩放矢量图形
SVG 可缩放矢量图形
119 0
|
JSON 前端开发 JavaScript
Threejs引入字体,实现3D文字,Canvas画布作为纹理贴图实现滚动字幕
Threejs引入字体,实现3D文字,Canvas画布作为纹理贴图实现滚动字幕
1072 0
|
前端开发
SVG 绘制自适应的菱形
SVG 绘制自适应的菱形
SVG 绘制自适应的菱形
|
前端开发
CSS和SVG实现文字渐变、描边、投影
CSS和SVG实现文字渐变、描边、投影
CSS和SVG实现文字渐变、描边、投影
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等