HTML绘图（二）：＜svg＞

最新推荐文章于 2024-04-18 15:45:14 发布
最新推荐文章于 2024-04-18 15:45:14 发布
阅读量258 收藏
点赞数
分类专栏： HTML 文章标签： html svg
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43226986/article/details/111505010
版权

目录

1. SVG简介

SVG（Scalable Vector Graphics） 意为可缩放矢量图形。
SVG 使用 XML 格式定义图像。
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失。
由于SVG是XML文件，SVG图像可以用任何文本编辑器创建，但它往往是与一个绘图程序一起使用，如Inkscape.，更方便地创建SVG图像。
什么是XML？

XML （eXtensible Markup Language）指可扩展标记语言，被设计用来传输和存储数据。

HTML 被设计用来显示数据。

有关于XML在我的另一篇博文中有详细的介绍： 【小白入门】始于前端UI（二）——XML简介.

2. 简单的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>

第一行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是否是"独立的"，或含有对外部文件的引用。standalone=“no” 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。
第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。该 DTD 位于 W3C，含有所有允许的 SVG 元素。
version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。

3. SVG嵌入HTML页面

3.1 SVG 文件嵌入HTML文档

可通过以下标签嵌入 HTML 文档：<embed>、<object> 或者 <iframe>，示例如下：

<!--主要浏览器都支持，并允许使用脚本；HTML4和XHTML禁用，HTML5允许-->
<embed src="circle1.svg" type="image/svg+xml" />

<!--主要浏览器都支持，不允许使用脚本；HTML4，XHTML，HTML5允许-->
<object data="circle1.svg" type="image/svg+xml"></object>

<!--主要浏览器都支持，并允许使用脚本；HTML4和XHTML禁用，HTML5允许-->
<iframe src="circle1.svg"></iframe>
3.2 SVG代码嵌入

SVG的代码可以直接嵌入到HTML页面中，或者直接链接到SVG文件。

<!DOCTYPE html>
<html>
<body>

<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>

也可以使用<a>标签链接到SVG文件：

<a href="circle1.svg">查看 SVG 文件</a>

参考链接

SVG参考手册.
SVG实例（把SVG代码直接嵌入到HTML代码中）.

阿阿阿是阿翼啊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
lisp沿线段方向标注多一线长度_求多段线图形的面积 长度标注 - AutoLISP/Visual LISP 编程技术 - CAD论坛 - 明经CAD社区 - Powered by Discuz!...
weixin_39948210的博客
12-21 594
;;; 框选封闭区域面积到excel by:langjs;;; ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝(defun c:qq (/ d ent f i lst m2 obj pt ss txt x y)(setq TextHeight (getdist "\n输入标注文字高度:"))(defun maketext (txt pt) ; 生成文字子函数(entmake (...
css中清除浮动float 上
qq_37805832的博客
09-16 710
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>65-清除浮动方式一</title> <style> *{ margin: 0; padding: 0; } .box1{ height: 20
【CAD插件】面积求和_CAD插件_cad_lisp_VBa_
10-03
对CAD图形面积求和，方便快捷，希望为你的绘图工作带来便利
HTML5中SVG与Canvas绘图技术的比较及选择依据
最新发布
AdolphMacDonald的博客
04-18 900
而Canvas的交互性相对较弱，因为Canvas绘图是通过JavaScript API实现的，而不是通过DOM。这使得SVG在传输和存储方面更具优势。然而，需要注意的是，SVG的渲染性能可能受到浏览器解析XML和DOM的影响，因此在一些旧版本或性能较低的浏览器中可能会出现兼容性问题。Canvas绘图是通过JavaScript API来实现的，它提供了一组丰富的绘图函数，可以绘制各种形状、线条、渐变和图像。是否需要与用户进行交互：如果需要实现复杂的用户交互功能，如点击、拖动或悬停效果，SVG可能更适合。
LISP文件 统计多段线的面积命令tjmj-并中心标注
奶茶也青春的博客
06-19 3111
;面积求和 ;;; 面积求和.LSP ;;; 功能: 计算多个选择对象的总面积 ;创建新图层 newlayer (defun c:tjmj (/ olderr oldcmdecho errexit undox restore ss1 nr en tot_area ZMJ) ;统计命令 tjmj ;出错处理 执行函数() (setq textH 0.4) (setq circleH (* textH 1.5)) ;设置字体高度 (defun errexit (s) (restore) ).
cad算面积.lsp
12-14
利用CAD计算面积。
在线图片转SVG网站HTML源码
10-20
Canvas是一个二维绘图环境，可以将图像绘制到画布上，然后通过`toDataURL()`方法获取其内容。 4. **SVG生成**：将Canvas中的图像数据解析成SVG格式，这可能涉及到复杂的算法，将像素数据转换为路径命令。这个过程...
html5 svg点击图片全屏动画展开图片文字特效
11-07
此外，HTML5的`<canvas>`元素和JavaScript API可以用于动态绘图，实现复杂的动画效果。 SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，它可以无限缩放而不会失真。SVG图像在网页中可以直接嵌入，也...
angular-svg:角度SVG
05-03
<svg-circle></svg-circle> ``` **Angular Material与Angular SVG** Angular Material是AngularJS的一个官方UI组件库，它提供了许多遵循Material Design规范的组件。将Angular SVG与Angular Material结合，可以...
html5 SVG绘图动画制作页面加载loading绘图动画效果
11-08
在制作页面加载动画时，我们通常会利用SVG的 `<svg>` 标签来创建一个画布，并通过 `<rect>`, `<circle>`, `<path>` 等元素来绘制形状。这些元素可以通过CSS来控制颜色、大小、位置等属性，也可以通过JavaScript来...
HTML5 SVG心形文字显示动画特效特效代码
03-20
心形文字显示动画特效通常会结合SVG的 `<path>` 元素来绘制心形线条。`<path>` 元素允许开发者通过指定一系列坐标点来绘制复杂的图形路径。例如，我们可以用这样的路径数据来描绘心形： ```html <path d="M100,100 ...
CAD长度求和.lsp
01-10
CAD长度求和，基于CAD二次开发，为了CAD使用这方便快捷，大大提高使用者的体验，以及在画图过程中，大大的节省时间，提高工作效率。
cad面积求和
07-16
cad多个面积一次性求和，免去你烦劳的重复工作，cad算量的小盆友有福了
【CAD插件】面积求和.rar
05-14
CAD工具，【CAD插件】面积求和.rar
cad面积求和工具
07-19
打开Auto CAD，从菜单中选择“工具”---“AutoLISP”---“加载”打开加载对话框； 启动命令aream
cad统计多线段总长度插件lsp
03-24
转载： cad插件，用于一次性统计多线段总长度，方便实用
中望CAD调用lisp在哪_LISP程序怎样加载到中望CAD上面？
weixin_39653405的博客
12-20 311
回答：1.计算所有线段总长度(加载后只需框选所有线段便可得出这些线段的总长度)(defun c:LL ()(setvar "cmdecho" 1)(setq en (ssget(list '(0 . "spline,arc,line,ellipse,LWPOLYLINE"))))(setq i 0)(setq ll 0)(repeat (sslength en)(setq ss (ssname e...
lisp沿线段方向标注多一线长度_AutoLISP自动标注圆，弧，直线，多段线长度
weixin_39665507的博客
12-21 720
(defun c:test()(setvar "cmdecho" 0)(setq en (entsel "\n选取圆、线、弧、多义线计算长度："))(while en(setq en (car en))(command "lengthen" en "")(setq dd (getvar "perimeter"))(princ (strcat "\n长度=" (rtos dd 2)))(setq p...
cad统计线段长度插件命令_提高工作效率之CAD常用命令(1)
weixin_39573981的博客
11-28 8507
面积&长度计算查询方法1、用面积命令AREA也可以简化为AA2、用LIST列表命令方法一：先选择刚PL框出的线，然后输入LI(或者LIST)，空格，跳出如下窗口方法二：先输入LI空格，选择多段线，再空格，这样也可以。如果下次打开程序时直接跳出文本窗口，输入“filedia”,将值选为1。3.用特性(快捷键 CTRL+1)选择多段线即可看在特性中看到长度跟面积，如下图4、快捷特性...
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>testD3-3-drawingDivBar</title> <script type="text/javascript" src="resource/d3.v5.min.js"></script> <style type="text/css"> /********* Begin / / End / </style> </head> <body> <div id="d3"></div> <script type="text/javascript"> / Begin / / End *********/ </script> </body> </html>要求补全代码完成以下任务： 选择id为d3的div进行绘图。层数量为5。 层间距为10px。 层宽度为25px。 层高度为175px，效果形状是阶梯状
05-25
以下是补全后的代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>testD3-3-drawingDivBar</title> <script type="text/javascript" src="resource/d3.v5.min.js"></script> <style type="text/css"> #d3 { width: 150px; height: 200px; background-color: #ccc; display: flex; justify-content: flex-end; } .bar { width: 25px; margin-left: 10px; background-color: blue; } </style> </head> <body> <div id="d3"></div> <script type="text/javascript"> // 选择id为d3的div进行绘图 const svg = d3.select("#d3") .append("svg") .attr("width", "100%") .attr("height", "100%"); // 层数量为5。层间距为10px。层宽度为25px。层高度为175px，效果形状是阶梯状 const data = [175, 150, 125, 100, 75]; svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", "bar") .attr("x", (d, i) => i * 35) .attr("y", d => 200 - d) .attr("width", 25) .attr("height", d => d); </script> </body> </html> ``` 解释： 1. 样式中设置 `display: flex;` 和 `justify-content: flex-end;` 是为了让矩形从右往左排列。 2. `x` 属性设置为 `(d, i) => i * 35`，其中 `i` 表示当前数据的索引，也就是第几个矩形，`35` 是一个矩形的宽度和层间距的和。 3. `y` 属性设置为 `d => 200 - d`，其中 `200` 是 `div` 的高度，`d` 是数据数组中的元素值，表示当前矩形的高度。这样设置可以让矩形从下往上排列，并且顶部对齐。 4. `width` 属性设置为 `25`，与样式中的层宽度相同。 5. `height` 属性设置为 `d => d`，与数据中的元素值相同，表示当前矩形的高度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值