文章列表
相关文章
更多最近更新
更多SVG 简单实例
2019-05-06 23:49|来源: 网路
简单的 SVG 实例
一个简单的SVG图形例子：
这里是SVG文件（SVG文件的保存与SVG扩展）：
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <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>
SVG 代码解析：
第一行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是否是"独立的"，或含有对外部文件的引用。
standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。
第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"。该 DTD 位于 W3C，含有所有允许的 SVG 元素。
SVG 代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg> 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。
SVG 的 <circle> 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。
stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽，黑边框。
fill 属性设置形状内的颜色。我们把填充颜色设置为红色。
关闭标签的作用是关闭 SVG 元素和文档本身。
注释：所有的开启标签必须有关闭标签！
相关问答
更多-
什么是SVG？[2022-08-22]
SVG（可缩放矢量图形）编辑 可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。 中文名可缩放矢量图形 外文名Scalable Vector Graphics 外语缩写SVG 开发商万维网联盟 发行时间1999年 格 式矢量图 延伸至可扩展标记语言 类 型图形格式 目录 -
最新开通快手实验室教程 直播权限？[2022-02-22]
简单 -
SVG绝对定位(SVG absolute positioning)[2023-06-04]
路径没有x / y属性或样式，就像您发现的那样。 你可以添加一个transform="translate(x, y)"属性，其中x，y是浮点数或者CSS转换属性，尽管我不确定CSS转换对SVG元素有多大的支持。 paths don't have x/y attributes or styles as you've discovered. You could add a transform="translate(x, y)" attribute where x, y are floats or maybe a ... -
克隆SVG后进行SVG过滤(SVG filters after cloning SVG)[2022-01-10]
我不确定究竟是什么导致这种情况，但问题的一部分可能是在克隆之后，你有两个＃f1。 在您永远不会克隆的单个SVG使用标签和ReactJS(SVG use tag and ReactJS)[2023-11-09]
React不支持所有的SVG标签，在这里有一个支持的标签列表。 他们在这张票中提供更广泛的支持，f.ex。 常见的解决方法是将HTML替换为非支持的标签f.ex： render: function() { var useTag = ''; return ; } Update september 2018 ...将2 [2022-12-21]
目前可供下载的文件有两个问题： 它包含两个并排的就个人而言，我可能会做类似以下的事情，将其存储在数据元素中。 这取决于你真正试图克服的问题，你实际上是如何制作动画的（我怀疑它可能比我的解决方案更容易使用某些动画，但试图想到涵盖大多数基础的东西），如果你真的需要它重置，你动画的属性数量，以及是否还有其他东西...... var smallCircle = s.circle(100, 150, 70); var saveAttributes = ['fill', 'cy']; Snap.plugin( function( Snap, Element, Pa ...SVG Circle Scaling(SVG Circle Scaling)[2022-04-28]
终于找到了简单的解决方案 显示svg作为背景的div应该大于SVG。 我有22px方块的盒子，与我设置SVG的大小相同。 为了解决这个问题，我将框显示为25像素，背景图像居中而不是设置在角落。 Finally found a simple solution. The div displaying the svg as the background should be larger than the SVG. I had the box at 22px square, the same size I was ...jQuery SVG包含字符串']]>'，它结束了cdata块。 如果您将']]>'更改为']'+']>'，则文件变为有效。 请参阅http://dl.dropbox.com/u/3885046/test.svg jQuery SVG includes the string ']]>', which ends the cdata block. If you change ']]>' to ']'+']>' the file becomes valid. see http://dl.dropbox.com/u ...SVG与互动(SVG with interaction)[2023-06-04]
只需添加begin =“click”就好了...... Just add begin="click" like so...