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>
目录
相关文章
|
2天前
|
搜索推荐 编译器 Linux
一个可用于企业开发及通用跨平台的Makefile文件
一款适用于企业级开发的通用跨平台Makefile,支持C/C++混合编译、多目标输出(可执行文件、静态/动态库)、Release/Debug版本管理。配置简洁,仅需修改带`MF_CONFIGURE_`前缀的变量,支持脚本化配置与子Makefile管理,具备完善日志、错误提示和跨平台兼容性,附详细文档与示例,便于学习与集成。
266 116
|
17天前
|
域名解析 人工智能
【实操攻略】手把手教学,免费领取.CN域名
即日起至2025年12月31日,购买万小智AI建站或云·企业官网,每单可免费领1个.CN域名首年!跟我了解领取攻略吧~
|
12天前
|
安全 Java Android开发
深度解析 Android 崩溃捕获原理及从崩溃到归因的闭环实践
崩溃堆栈全是 a.b.c?Native 错误查不到行号?本文详解 Android 崩溃采集全链路原理,教你如何把“天书”变“说明书”。RUM SDK 已支持一键接入。
658 220
|
5天前
|
数据采集 人工智能 自然语言处理
Meta SAM3开源:让图像分割,听懂你的话
Meta发布并开源SAM 3,首个支持文本或视觉提示的统一图像视频分割模型,可精准分割“红色条纹伞”等开放词汇概念,覆盖400万独特概念,性能达人类水平75%–80%,推动视觉分割新突破。
334 34
Meta SAM3开源:让图像分割,听懂你的话
|
10天前
|
人工智能 移动开发 自然语言处理
2025最新HTML静态网页制作工具推荐:10款免费在线生成器小白也能5分钟上手
晓猛团队精选2025年10款真正免费、无需编程的在线HTML建站工具,涵盖AI生成、拖拽编辑、设计稿转代码等多种类型,均支持浏览器直接使用、快速出图与文件导出,特别适合零基础用户快速搭建个人网站、落地页或企业官网。
1528 157
|
存储 人工智能 监控
从代码生成到自主决策:打造一个Coding驱动的“自我编程”Agent
本文介绍了一种基于LLM的“自我编程”Agent系统,通过代码驱动实现复杂逻辑。该Agent以Python为执行引擎,结合Py4j实现Java与Python交互,支持多工具调用、记忆分层与上下文工程,具备感知、认知、表达、自我评估等能力模块,目标是打造可进化的“1.5线”智能助手。
897 61
|
7天前
|
编解码 Linux 数据安全/隐私保护
教程分享免费视频压缩软件,免费视频压缩,视频压缩免费,附压缩方法及学习教程
教程分享免费视频压缩软件,免费视频压缩,视频压缩免费,附压缩方法及学习教程
291 140