基本形状 基本 SVG 文档 1

最新推荐文章于 2024-11-01 15:19:31 发布
最新推荐文章于 2024-11-01 15:19:31 发布
阅读量782 收藏 1
点赞数
分类专栏： SVG/GML 文章标签： 文档 html 浏览器 xml browser vector
从本质上来说，SVG 文档是 XML 文档。这就是说 SVG 文档有某些基本属性：

*所以的标记都有开始标记和结束标记，否则必须注明为空标记。空标记用反斜杠结束，如<rect />。
* 标记必须正确嵌套。 如果一个标记在另一个标记中开始，那么它也必须在那个标记中结束。例如，<g><text>Hello there!</text></g> 是正确的，但 <g><text>Hello there!</g></text> 不正确。
*文档必须只有一个根。正如一个 <html></html> 元素包含了一个 HTML 页面的所有内容一样，一个 <svg></svg> 元素也包含一个 SVG 文档的所有内容。
*文档应该以 XML 声明 <?xml version="1.0"?> 开始。
*文档应该包含一个 DOCTYPE 声明， 该声明指向一个允许元素的列表。SVG 1.0 文档的 DOCTYPE 声明是：

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">

<desc>All SVG documents should have a description</desc>

<defs>
<!-- Items can be defined for later use -->
</defs>

<g>
<circle cx="100" cy="100" r="75" fill="green"/>
</g>
</svg>
  • 在HTML页面上包含SVG

　　SVG 文档本身就非常有用，但在目前（目前它仍处于开发阶段）将它们添加到 Web 页面会发挥它们最大的作用。将它们添加到 Web 页面也使得在浏览器中显示它们变得更容易；根据用户系统的文件名关联的设置情况，有些浏览器会拒绝打开一个 *.svg 文件，但显示作为 Web 页面一部分的 SVG 图像将不会有问题。

　　将 SVG 图像添加到 HTML 页面很简单：只要添加一个具有适当属性的 <object></object> 元素即可：

<html>
<head><title>SVG Demonstration</title></head>
<body>

<h2 style="text-align: center">SVG Demonstration</h2>

<p>A page may have other code besides the SVG image.</p>

<object type="image/svg+xml" data="MySVG.svg"
width="300" height="200">
<img src="NonSVG.gif" mce_src="NonSVG.gif" alt="SVG 图像的静态版本" />
</object>

<p>Using objects allows the browser to decide what to display.</p>

</body>
</html>

　 　请特别注意 <object></object> 标记上的 height 和 width 属性。如果没有指定它们，有些浏览器将不会正确显示图像。此外，浏览器在执行某些计算（最特别的是用 viewBox 缩放）会考虑这些值，因此，如果没有正确地指定它们（如简单地用大的数值显示可能出现的任何东西），它们可能会干扰图像的正确显示。

  • 基本 SVG 形状
　　SVG 定义了六种基本形状，这些基本形状和路径（在路径是什么？中讨论）一道，可以组合起来形成任何可能的图像。每个基本形状都带有指定其位置和大小的属性。它们的颜色和轮廓分别由 fill 和 stroke 属性确定。这些形状是：

圆（circle）：显示一个圆心在指定点、半径为指定长度的标准的圆。
椭圆（ellipse）：显示中心在指定点、长轴和短轴半径为指定长度的椭圆。
矩形（rect）：显示左上角在指定点并且高度和宽度为指定值的矩形（包括正方形）。也可以通过指定边角圆的 x 和 y 半径画成圆角矩形。
线（line）：显示两个坐标之间的连线。
折线（polyline）：显示顶点在指定点的一组线。
多边形（polygon）：类似于 polyline，但增加了从最末点到第一点的连线，从而创建了一个闭合形状。
下面的示例演示了这些形状：

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">

<desc>Basic shapes</desc>

<g>
<circle cx="50" cy="50" r="25" />
<ellipse cx="75" cy="125" rx="50" ry="25" />

<rect x="155" y="5" width="75" height="100"/>
<rect x="250" y="5" width="75" height="100" rx="30" ry="20" />

<line x1="0" y1="150" x2="400" y2="150"
stroke-width="2" stroke="blue"/>

<polyline points="50,175 150,175 150,125 250,200" />
<polygon points="350,75 379,175 355,175 355,200 345,200
345,175 321,175" />

<rect x="0" y="0" width="400" height="200"
fill="none" stroke="red" stroke-width="3" />
</g>
</svg>

  • 添加文本

　　除了形状以外，SVG 图像还可以包含文本。SVG 给予设计人员和开发人员对文本的大量控制，可以获得很好的图形效果而不必借助失去真实纹理信息的图像（*.gif 或 *.jpg 图像甚至 Flash 电影常常这么做）。

　　SVG 的文本和字体能力在以添加文本开始的文本部分讨论，而现在重要的是要理解所有在传统 HTML 页面中通过级联样式表（Cascading Style Sheet）可以获得的效果，也都可以在 SVG 图像内的文本元素中得到。例如：

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="125" xmlns="http://www.w3.org/2000/svg">

<desc>Basic text</desc>

<g>
<rect x="0" y="0" width="400" height="125" fill="none"
stroke="blue" stroke-width="3"/>

<text x="10" y="50" font-size="30">Welcome to the world of</text>
<text x="10" y="100" font-size="40"
font-family="Monotype Corsiva"
fill="yellow" stroke="red">Scalable Vector Graphics!</text>
</g>
</svg>
  • 渲染顺序


　　当组合多种不同元素时，正象 SVG 图像一样，重要的是牢记各项在页面上的放置顺序，因为这关系到谁“在上面”出现。在一个 HTML 页面上，使用 z-index 属性来控制这一分层效果，而对于 SVG 图像，则严格按顺序放置各项。每个后继层放置在那些已放置层的上面。

　　如果指定一个元素没有填充色（使用 fill="none"），那么在它下面的各项会显现出来，就象您在这里看到的：

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">

<desc>Overlapping shapes</desc>

<g>
<ellipse cx="125" cy="50" rx="50" ry="25"
fill="none" stroke="black" />
<circle cx="125" cy="50" r="25" fill="dodgerblue" />
<circle cx="125" cy="50" r="10" fill="black" />

<ellipse cx="250" cy="50" rx="50" ry="25"
fill="none" stroke="black" />
<circle cx="250" cy="50" r="25" fill="dodgerblue" />
<circle cx="250" cy="50" r="10" fill="black" />

<polygon points="65,50 185,50 185,75, 150,100
100,100 65,75"
fill="none" stroke="purple" stroke-width="4"/>
<polygon points="190,50 310,50 310,75, 275,100
225,100 190,75"
fill="none" stroke="purple" stroke-width="4"/>

<line x1="65" y1="50" x2="310" y2="50"
stroke="plum" stroke-width="2"/>

</g>
</svg>

　　请注意每个元素会覆盖在它之前出现的元素。


mydriverc
关注
专栏目录
5.SVG文档结构
五石之瓠 以为大樽 浮于江湖 悠笑人生
10-11 1144
Chapter 5. Document Structure 我们偶然提到过，SVG 允许您将文档的结构与其表示分离。在这一章中，我们将比较和对比这两者，更详细第讨论文档外观方面，然后展示一些 SVG 元素，这些元素您能够使文档结构更加清晰，更容易阅读，更容易维护。 Structure and Presentation 就像章节 1 提到的那样，在 Basic Shapes 中，XML的目的使提供一种方法来组织数据，并将这个结构从它的视觉呈现中分离出来。想一想那一章中画的猫。你识别出它是一只猫，是因为它的结构
SVG基本形状及样式设置
词语大杂烩
09-05 1698
图形分为位图和矢量图。位图是基于颜色的描述，是由像素点组成的图像；而矢量图是基于数学矢量的描述，是由几何图元组成的图像，与分辨率无关。可缩放矢量图形，即SVG，是W3C XML的分支语言之一，用于标记可缩放的矢量图形。本文将详细介绍SVG基本形状及样式设置   概述 　　SVG是XML语言的一种形式，有点类似XHTML，它可以用来绘制矢量图形，可以通过定义必要的线和形状来创建
d3入门练习系列（三）绘制svg基本形状
此爱如少年
04-09 1033
如果你对svg绘图比较熟悉，那么通过d3绘制svg格式的基本形状，如线段、折线、多边形、矩形等等，将非常简单。如果你不熟悉svg绘图，也没关系。举个例子：如下代码表示一个圆心在(25, 75)半径为20的圆：。一分钟的功夫，你就大概了解。废话不多，直接上代码。基本上就是创建一个形状标签，然后通过attr方法将相应的属性及属性值加上去就OK。
基本形状 基本 SVG 文档 2
旅途
12-13 765
定义和组 定义可重用部件　　通常在 SVG 图像的构建中，各部分或者是可重用的，或者不便于在图像主体内定义。在这些情况下，通常方便的做法是在文档的定义部分内（作为 元素的一部分）通过给这些部分指定以后可在图像主体中调用的标识来创建它们。　　 例如，在前面一页中显示的图像有两只眼睛，每只眼睛边缘有一个眼镜镜片。这个文档可以在定义部分中定义一个镜片，然后在文档中调用它两次，而不
SVG基本图形的创建和动画详解——1
Eiwen的博客
04-08 1462
一.引言 　　SVG全称为“Scalable Vector Graphics”，意为可缩放矢量图形。而什么是矢量图？矢量就是向量，所以矢量图就意味着无限缩放而不改变图片的质量。 　　多说无益，下面放MDN上关于SVG的定义： SVG是XML语言的一种形式，有点类似XHTML，它可以用来绘制矢量图形，例如右面展示的图形。SVG可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图...
svg基本知识
ab31ab的博客
11-19 541
写这篇文章的缘由是因为做dashboard的项目，图形是svg的项目,参考的项目使用div写的，然后为了改样式一直在套样式，结果套不出来，也是醉了，整理了一下svg的基本格式，从w3c上整理的，详细的列子参考https://www.w3school.com.cn/svg/svg_rect.asp 目录 svg形状 矩形 圆形 椭圆 线 多边形 折线 标签 SVG ...
SVG的基本图形形状
kevintangsa的博客
07-20 402
[size=medium]和其它矢量化图形工具一样，SVG也有一些预定义的基本形状可供我们直接使用，这些基本形状称为元素，就像HTML文档中的table元素一样，下面是SVG标准里预先定义好的基本形状元素：矩形、圆形、椭圆、直线、折线、多边形、描绘路径 等。 ：通过指定开始点(x1，y1)、结束点(x2，y2)和宽度stroke定义一条直线，语法如下： 要想得到很细的线，可以指定stroke-w...
SVG基本元素和path路径用法
YSG的博客
05-09 2929
SVG&PATH 1. 基本定义 可缩放矢量图形（Scalable Vector Graphics，SVG），是一种用于描述基于二维的矢量图形的，基于 XML 的标记语言。SVG提供了一些元素，用于定义圆形(circle)、矩形(rect)、简单或复杂的曲线(line)，以及其他形状。一个简单的SVG文档由<svg>根元素和基本的形状元素构成。另外还有一个g元素，它用来把若干个基本形状编成一个组。 2.常用元素 元素
SVG基本用法
qq_40858865的博客
09-26 422
SVG svg是一种语言，这种语言用来描述二维图形和绘图使用。svg是存粹的XML。（什么是XML） 一个简单的 SVG 文件的例子 &lt;?xml version="1.0" standalone="no"?&gt; //对xml声明，standalone该属性规定此 SVG 文件是否是“独立的”，或含有对外部文件的引用。 //standalone="no" 意味着 SVG 文档会引用一个外部...
svg操作文档.rar
02-27
1. **基本元素**：SVG由一系列的图形元素组成，如矩形（rect）、圆形（circle）、椭圆（ellipse）、线（line）、路径（path）、多边形（polygon）和曲线（polyline）。每个元素都有相应的属性，如位置、大小、颜色等...
HTML中使用SVG与SVG预定义形状元素介绍
09-28
在HTML中，SVG（Scalable Vector Graphics）是一种用于创建矢量图形的标记语言，它...理解并熟练使用这些SVG形状元素，可以创建出丰富多样的图形，并结合JavaScript实现动态交互效果，增强网页的视觉表现力和用户体验。
svg-to-ppt：将SVG转换为PPT，以便在Keynote和PowerPoint中使用形状
02-18
为了更好地利用这个工具，你需要理解基本的命令行操作，并可能需要对SVG和PPT文件格式有一定的了解。 总之，`svg-to-ppt`工具提供了一种方便的方法，使得SVG图形能够被导入到Keynote和PowerPoint中，保持其矢量特性...
SVG相关文档
08-10
SVG的基本构成包括图形元素、路径、形状、文本、渐变、滤镜等。这些元素通过XML语法进行描述，使得SVG图像可以被搜索引擎索引，便于屏幕阅读器读取，同时也支持脚本和交互性，增强了用户体验。 1. **图形元素与形状...
HTML 基础标签——元数据标签 ＜meta＞
最新发布
Allen-
11-01 200
标签通常位于文档的部分。它用于定义文档的元数据，包括字符编码、文档描述、关键字、作者信息等。这些信息可以帮助浏览器正确解析和显示文档，同时还可以提供搜索引擎索引所需的信息。
炫酷的登录框!(附源码)
m0_50864141的博客
10-29 2063
【代码】炫酷的登录框!(附源码)
HTML小阶段二维表和思维导图
2301_79075752的博客
10-29 914
下面是对标签、元素、属性的对比二维表，通过对比3w1h（what是什么、where用在哪、why为什么要用、how如何用）来学习区分学习标签、元素、属性标签元素属性what（Tags）标签是用来标记内容块或标明元素内容意义（Element）网页内容是由元素组成的，一个元素通常由一个开始标签、内容、其他元素及一个结束标签组成。（Attribute）与元素相关的特性，用于提供额外的信息或配置选项。where开始标签：位于元素的开头，用于标记一个元素的开始。
Html编写发射粒子爱心
m0_58419490的博客
10-31 898
【代码】Html编写发射粒子爱心。
HTML入门教程22：HTML文件路径
软考鸭
10-30 544
相对路径是相对于当前HTML文件所在位置的路径。它不会包含协议、域名或完整的文件路径，而是根据当前文件与目标文件之间的相对位置来确定路径。
[Vue warn]: Do not use built-in or reserved HTML elements as component id:
weixin_42220130的博客
10-29 466
在Vue中，组件的ID应该是唯一的，以确保没有冲突。很可能是一个保留字或者是一个内置的HTML元素名称，所以Vue拒绝了这样的用法。如果你正在使用Vue 2.x版本，确保全局ID的唯一性，如果是在Vue 3.x中，则应该使用一个独一无二的name属性代替ID。更改组件的ID，使用一个独一无二的名称，确保它不是一个内置的HTML元素名称，也不是Vue的保留字。在这个例子中，my-custom-component就是一个不会与内置HTML元素冲突的组件ID。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值