SVG 的引用和 stroke 属性 及基本形状元素

最新推荐文章于 2024-06-07 06:01:26 发布
最新推荐文章于 2024-06-07 06:01:26 发布
阅读量991 收藏 3
点赞数
分类专栏： stroke 文章标签： svg
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RJ0403/article/details/112487812
版权

1、SVG 的引用：
SVG 在HTML 中 的引用方法：
1.1、使用 < embed >标签

  • 优势：所有主要浏览器都支持，并允许使用脚本
  • 缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）
<embed src="./02.demo.svg" type="image/svg+xml"/>

1.2、使用 < object > 标签

  • 优势：所有主要浏览器都支持，并支持HTML4，XHTML和HTML5标准
  • 缺点：不允许使用脚本。
<object data="./02.demo.svg" type="image/svg+xml"></object>

1.3、使用 < iframe > 标签

  • 优势：所有主要浏览器都支持，并允许使用脚本
  • 缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）
<iframe src="02.demo.svg" frameborder="0"></iframe>

1.4、直接在HTML嵌入SVG代码

<html>
<body> 
<h1>My first SVG</h1> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red" />
</svg>
</body>
</html>

2、 SVG有一些预定义的形状元素，可被开发者使用和操作：

  • rect 元素的 width 和 height 属性可定义矩形的高度和宽度
  • style 属性用来定义 CSS 属性
  • CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
  • CSS 的 stroke-width 属性定义矩形边框的宽度
  • CSS 的 stroke 属性定义矩形边框的颜色
    – 矩形 < rect >
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300" height="100"
  style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>

–圆形 < circle >

cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
r属性定义圆的半径

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

–椭圆 < ellipse >

CX属性定义的椭圆中心的x坐标
CY属性定义的椭圆中心的y坐标
RX属性定义的水平半径
RY属性定义的垂直半径*

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="300" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>

–线 < line >
x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="0" y1="0" x2="200" y2="200"
  style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

–折线 < polyline >

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
  style="fill:none;stroke:black;stroke-width:3" />
</svg>

–多边形 < polygon >
points 属性定义多边形每个角的 x 和 y 坐标

<svg  height="210" width="500">
  <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

–文本 < text >

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="0" y="15" fill="red">I love SVG</text>
</svg>

3、stroke属性

  • stroke

  • stroke-width

  • stroke-dasharray

Stroke属性定义一条线，文本或元素轮廓颜色;
stroke- width属性定义了一条线，文本或元素轮廓厚度;
strokedasharray属性用于创建虚线。
每天多喝点水
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML中使用SVG与SVG预定义形状元素介绍
09-28
在HTML中，SVG（Scalable Vector Graphics）是一种用于创建矢量图形的标记语言，它...理解并熟练使用这些SVG形状元素，可以创建出丰富多样的图形，并结合JavaScript实现动态交互效果，增强网页的视觉表现力和用户体验。
svg在HTML中（1）
weixin_30328063的博客
08-11 123
相信很多童鞋，遇到svg也只是会用，并不是真正的了解他，那么今天tom大哥哥就来带大家学习一下svg这个鸟。。。。 好来正题开始： 小试牛刀。 <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> <!--Face--> <circle cx="10...
SVG图片在HTML页面中的四种加载方法
大剑师兰特的GIS世界
11-20 4823
SVG因为体积小，矢量图的缘故，经常会在html页面中引用此种格式的图形。这里有四种引用加载的形式。
SVG Stroke 属性
最新发布
xyq2024的博客
06-07 287
SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的XML标记语言。在SVG中，stroke属性用于设置图形的边框颜色、宽度和样式。本文将详细介绍SVG中的stroke属性，包括其各种属性值和用法。
形状绘图（一）
m0_50175138的博客
03-27 386
一、 形状绘图 （1）含义：形状(Shape)是一个2D绘图类，位于系统窗口形状（System.Windows.Shapes）空间内的绘图控件。 （2）系统窗口形状最常用的绘图对象有： ①Line：直线，是最简单的图形； ②Rectangle：矩形，由笔触（Stroke，即边线）和填充（Fill）构成； ③Ellipse：椭圆，也是一种常见的几何图形，它也是由笔触（Stroke，即边线）和填充（Fill）构成； ④Polygon：多边形，它是由一系列相互连接的线条构成的闭合形状。； ⑤Path：路径（Pat
SVG入门-填充和边框
natsu-cc的博客
03-22 2255
前言 当我们绘制好了形状之后，是不会在SVG上显示出来（当然浏览器会给形状定义默认的填充色）。需要学习如何给形状添加颜色。可以使用几种方法来着色，包括指定对象的属性，使用内联CSS样式，或者内嵌的CSS样式，或者使用外部的CSS样式文件。大多数的web网站的SVG使用的是内联样式CSS，对于这些方法都有优缺点。 Fill 和 Stroke 属性 要使得形状显示出来，可以用两个属性来解决，一个是fill属性，一个是stroke属性，fill是填充，stroke是描边。 <rect x="10" y="
HTML基础 - SVG标签
seevc的专栏
09-04 2640
svg是基于XML语法的图像格式，全称：Scalable Vector Graphics，即可缩放矢量图。svg图片可以加载。svg可以绘制基本图形，如：直线、圆形、矩形、多边形、路径等，下面就详细介绍下。
SVG元素和代码解释
08-21
SVG中的**图形元素**是用于绘制各种形状的基础构建块，主要包括矩形、圆形、椭圆形、直线、折线和多边形等。 ##### 1. 矩形 (Rectangle) 矩形通过`<rect>`元素进行定义，主要属性包括`width`（宽度）、`height`...
spanningpeeps:玩svg元素和进行跨度黑客马拉松
05-06
SVG元素是构成SVG图像的基本单位，包括形状元素（如`<rect>`矩形、`<circle>`圆形、`<ellipse>`椭圆、`<line>`线、`<polyline>`多边形线、`<polygon>`多边形）、路径元素（`<path>`）、文本元素（`<text>`）等。...
SVG基本应用源码
02-19
2. **CH06 - 基本形状**：此章节深入探讨了SVG中的基本形状元素，如path（路径）、line（线）、polyline（多边形）、polygon（星形或多边形）等。源码会涵盖绘制各种复杂形状的方法，并展示如何使用stroke和fill属性...
svg:Web的SVG图像的基本实现
03-30
SVG的基本元素包括`<svg>`根元素、图形元素（如`<rect>`矩形，`<circle>`圆形，`<line>`直线等）、路径元素`<path>`以及填充、描边属性等。 2. SVG的引入方式 在HTML中，SVG图像可以有以下几种引入方式： - 内联：...
SVG在网页中的四种使用方式
weixin_33943347的博客
07-17 830
1，直接打开simple.svg &lt;svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"&gt; &lt;circle cx="100" cy="100" r="90" fill="#39F" /&gt; &lt;circle
HTML - embed 与 object 之争
dangerous_fire的专栏
09-22 921
在 HTML 里嵌入文本和图片之外的事物，就会用到嵌入标签，而嵌入标签在各浏览器之间的不统一，一直是让开发人员很头痛的问题。一切都要从嵌入 SUN 公司的 Applet Java 小程序开始。 　　当时，对于 Applet 的嵌入，浏览器老大哥 Netscape 公司是使用 embed 标签的，embed 标签的好处就是嵌入一个对象只需要一对标签，所有参数都写入该标签的属性，非常方便。而微软和其
svg之ViewBox详解
子非渔
03-20 1万+
先来看一下svg的格式： <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="layer1" xmlns="...
SVG学习笔记一
OnlyRu丶小心心
05-22 1173
1、SVG矩形 <rect x="10" y="10" height="50" width="50" rx="5" ry="5" style="stroke:#006600;stroke-width: 3; stroke-dasharray: 10 5; fill: #00cc00;fill-opacity: 0.5"/> SVG矩形的位置由x和y属性决定。请记住，这个位置是相对于任何它最接近的父元素的位置。 SVG矩形的尺寸由width和height属性决定。 style属性允许你为矩形设置
SVG 矩形rect 学习
liuyan1106_的博客
04-12 3766
1 基础写法 以下两种写法都可以定义图形的样式，矩形默认的填充颜色是黑色。 <svg> <rect width="300" height="100" /> </svg> <svg> <rect style="width:300px;height:100px;" /> </svg> 效果截图： 2 填充背景色 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）。 <svg> <re
折线(Polyline)、多边形(Polygon)
singhwong
12-07 9383
Polyline Playline所绘制的图形由多个线段组成，因此它公开Points属性，它表示一系列坐标点的集合。这些点将用于描述Polyline图形中各线段相接处的顶点(包括起点和终点)。 Points集合在XAML中可以直接用字符串写上多个点，书写方法有两种： 每个坐标点之间使用至少一个空格开分隔，横坐标和纵坐标用英文的逗号分隔。 一个坐标点的横坐标与纵坐标用一个空格来分隔，这时候点与点之间就不能用单个空格来分隔了，因为这样书写会很混乱，编译器无法识别，因此点与点之间至少要用两个空格来分隔。 示
网页引入svg图片的4种方式
热门推荐
晴空闲云
10-11 3万+
web应用开发使用svg图片，总结了下，可以有如下4种方式： 1. 直接插入页面。 2. img标签引入。 3. css引入。 4. object标签引入。
HTML5 canvas 中的 fillstyle fillrect strokeStyle strokeRect fill stroke rect 的简单理解
cysear的专栏
04-19 3493
fill和stroke英文释义 fill的意思是填充，stroke的意思是一笔，一划，可以理解为只画边框 fillStyle & strokeStyle 背景颜色可以通过fillStyle来实现，描边颜色可以通过strokeStyle来实现。 fillText &strokeText fillText        //在画布上画文本并填充预设定的fillStyle背景颜
"SVG元素和代码解释：图形元素及含意解析
除了图形元素之外，SVG还包括容器元素、图形引用元素、文本和SVG文档片段内容等几种类型的元素，它们通过代码嵌套和属性设置来实现对SVG画布的组织、排版和呈现。通过对SVG元素的理解和灵活运用，可以实现各种炫丽的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值