svg DOM的一些js操作

最新推荐文章于 2022-06-09 15:20:03 发布
原创 最新推荐文章于 2022-06-09 15:20:03 发布 · 388 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#java

本文介绍了如何使用JavaScript创建SVG文档并添加基本图形元素，包括圆形、椭圆、直线、路径、多边形、折线、矩形和圆角矩形，并展示了SVG使用方法和属性设置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

这是第一个实例,其中讲了如何新建svg,添加元素,保存svg document,查看svg.

下面将附上常用一些元素的添加方法:(为js的,但基本上跟java中操作一样,就是类名有点细微差别)

Circle

var svgns = "http://www.w3.org/2000/svg";

 

function makeShape(evt) {

    if ( window.svgDocument == null )

        svgDocument = evt.target.ownerDocument;

 

    var shape = svgDocument.createElementNS(svgns, "circle");

    shape.setAttributeNS(null, "cx", 25);

    shape.setAttributeNS(null, "cy", 25);

    shape.setAttributeNS(null, "r",  20);

    shape.setAttributeNS(null, "fill", "green");

 

    svgDocument.documentElement.appendChild(shape);

}

Ellipse

var svgns = "http://www.w3.org/2000/svg";

 

function makeShape(evt) {

    if ( window.svgDocument == null )

        svgDocument = evt.target.ownerDocument;

 

    var shape = svgDocument.createElementNS(svgns, "ellipse");

    shape.setAttributeNS(null, "cx", 25);

    shape.setAttributeNS(null, "cy", 25);

    shape.setAttributeNS(null, "rx", 20);

    shape.setAttributeNS(null, "ry", 10);

    shape.setAttributeNS(null, "fill", "green");

 

    svgDocument.documentElement.appendChild(shape);

}

Line

var svgns = "http://www.w3.org/2000/svg";

 

function makeShape(evt) {

    if ( window.svgDocument == null )

        svgDocument = evt.target.ownerDocument;

 

    var shape = svgDocument.createElementNS(svgns, "line");

    shape.setAttributeNS(null, "x1", 5);

    shape.setAttributeNS(null, "y1", 5);

    shape.setAttributeNS(null, "x2", 45);

    shape.setAttributeNS(null, "y2", 45);

    shape.setAttributeNS(null, "stroke", "green");

 

    svgDocument.documentElement.appendChild(shape);

}

Path

var svgns = "http://www.w3.org/2000/svg";

 

function makeShape(evt) {

    if ( window.svgDocument == null )

        svgDocument = evt.target.ownerDocument;

 

    var shape = svgDocument.createElementNS(svgns, "path");

    shape.setAttributeNS(null, "d", "M5,5 C5,45 45,45 45,5");

    shape.setAttributeNS(null, "fill", "none");

    shape.setAttributeNS(null, "stroke", "green");

 

    svgDocument.documentElement.appendChild(shape);

}

Polygon

var svgns = "http://www.w3.org/2000/svg";

 

function makeShape(evt) {

    if ( window.svgDocument == null )

        svgDocument = evt.target.ownerDocument;

 

    shape = svgDocument.createElementNS(svgns, "polygon");

    shape.setAttributeNS(null, "points", "5,5 45,45 5,45 45,5");

    shape.setAttributeNS(null, "fill", "none");

    shape.setAttributeNS(null, "stroke", "green");

 

    svgDocument.documentElement.appendChild(shape);

}

Polyline

var svgns = "http://www.w3.org/2000/svg";

 

function makeShape(evt) {

    if ( window.svgDocument == null )

        svgDocument = evt.target.ownerDocument;

 

    shape = svgDocument.createElementNS(svgns, "polyline");

    shape.setAttributeNS(null, "points", "5,5 45,45 5,45 45,5");

    shape.setAttributeNS(null, "fill", "none");

    shape.setAttributeNS(null, "stroke", "green");

 

    svgDocument.documentElement.appendChild(shape);

}

Rectangle

var svgns = "http://www.w3.org/2000/svg";

 

function makeShape(evt) {

    if ( window.svgDocument == null )

        svgDocument = evt.target.ownerDocument;

 

    var shape = svgDocument.createElementNS(svgns, "rect");

    shape.setAttributeNS(null, "x", 5);

    shape.setAttributeNS(null, "y", 5);

    shape.setAttributeNS(null, "width",  40);

    shape.setAttributeNS(null, "height", 40);

    shape.setAttributeNS(null, "fill", "green");

 

    svgDocument.documentElement.appendChild(shape);

}

Rounded Rectangle

var svgns = "http://www.w3.org/2000/svg";

 

function makeShape(evt) {

    if ( window.svgDocument == null )

        svgDocument = evt.target.ownerDocument;

 

    var shape = svgDocument.createElementNS(svgns, "rect");

    shape.setAttributeNS(null, "x", 5);

    shape.setAttributeNS(null, "y", 5);

    shape.setAttributeNS(null, "rx", 5);

    shape.setAttributeNS(null, "ry", 5);

    shape.setAttributeNS(null, "width",  40);

    shape.setAttributeNS(null, "height", 40);

    shape.setAttributeNS(null, "fill", "green");

 

    svgDocument.documentElement.appendChild(shape);

}

Use

var svgns   = "http://www.w3.org/2000/svg";

var xlinkns = "http://www.w3.org/1999/xlink";

 

function makeShape(evt) {

    if ( window.svgDocument == null )

        svgDocument = evt.target.ownerDocument;

 

    var svgRoot = svgDocument.documentElement;

 

    var defs = svgDocument.createElementNS(svgns, "defs");

 

    var rect = svgDocument.createElementNS(svgns, "rect");

    rect.setAttributeNS(null, "id", "rect");

    rect.setAttributeNS(null, "width", 15);

    rect.setAttributeNS(null, "height", 15);

    rect.setAttributeNS(null, "style", "fill: green");

 

    defs.appendChild(rect);

 

    var use1 = svgDocument.createElementNS(svgns, "use");

    use1.setAttributeNS(null, "x", 5);

    use1.setAttributeNS(null, "y", 5);

    use1.setAttributeNS(xlinkns, "xlink:href", "#rect");

 

    use2 = svgDocument.createElementNS(svgns, "use");

    use2.setAttributeNS(null, "x", 30);

    use2.setAttributeNS(null, "y", 30);

    use2.setAttributeNS(xlinkns, "xlink:href", "#rect");

 

    svgRoot.appendChild(defs);

    svgRoot.appendChild(use1);

    svgRoot.appendChild(use2);

}

SVG DOM及DOM操作介绍 - HTML5教程技巧
PmtxPhp的博客
09-27 434
在HTML5中，SVG成为了一种重要的图形标准，可以通过JavaScript的DOM（Document Object Model）来对SVG文档进行操作和控制。通过SVG DOM，您可以使用JavaScript与SVG文档进行交互，包括创建SVG元素、修改元素属性和样式，以及添加事件处理。通过SVG DOM，您可以访问和操作SVG文档中的元素、属性和事件，并实现动态的图形效果。在JavaScript代码中，我们使用了ID为"mySvg"和"myCircle"的元素，在使用前请确保SVG文档中存在这些元素。
js操作svg实例
10-09
html、JSP页面使用js操作svg元素实例
网页可视化元素操作——svg.js
happyElina的博客
07-03 2531
最近公司的新需求是做一个可以自己编辑页面元素形状，旋转，拖动以及填充图片的功能，经查觉得svg.js是一个较好的实现方式，配合插件svg.draggable.js可实现元素的拖动。 踩过的坑： 1 项目中需要用到最新的版本，旧版和新版初始化图像的用法不一样 我用的svg.js ：3.0.13 svg.draggable.js:3.0.2 需要找到对应的版本...
SVG JS api
09-13
svg api(JavaScript) 这个文档比较详细
svgdocument相关文档
wenzi_li的专栏
11-18 756
http://tag.csdn.net/tag/svgdocument/1.html   SVG显示中文问题解决步骤 在demo的startApp()方面中，有加载字体的操作： // Load the default SVG font. SVGDocument doc = canvas.loadSVG("/tinyline/helvetica.svg"); SVGFontElem font = ...
svgdom：简单明了的DOM实现，使SVG.js在Node.js上无头运行
02-06
npm install svg.js svgdom // returns a window with a document and an svg root node const { createSVGWindow } = require ( 'svgdom' ) const window = createSVGWindow ( ) const SVG = r
gulp-svg2el:从 SVG 图像文件中提取 SVG DOM 元素
06-30
gulp-svg2el Gulp 插件将传递的 HTML 转换为 Javascript $ npm install gulp-...该插件会转义源 HTML 中的所有相关字符，将制表符/空格折叠为单个空格并修剪结果以输出有效的 SVG DOM 元素。 ，由编写，用于项目 。
dom-to-svg:用于将给定HTML DOM节点转换为可访问的SVG“屏幕截图”的库
03-16
DOM到SVG 用于将给定HTML DOM节点转换为可访问的SVG“屏幕截图”的库。 演示版 :camera_with_flash: 试用，该使用此库可让您获取任何网页的SVG屏幕截图。 您可以在找到源代码。 用法 import { documentToSVG , ...
svgdom在Node.js上实现SVG.js无头运行的简易DOM
svgdom的出现，弥补了在服务器端环境中运行SVG.js的空白，使得在Node.js这样的服务器端JavaScript环境中也可以进行SVG图形的处理和生成。 SVG（Scalable Vector Graphics）是一种基于XML的图像格式，用于描述二维...
html5 svg defs,html5之svg
weixin_39888080的博客
06-30 187
HTML5之svg矢量图，缩放不变形。1. 绘制基础1.1标签绘制svg基础style="stroke:rgb(99,99,99);stroke-width:5" />1.2 js绘制demovar SVG_NS = 'http://www.w3.org/2000/svg';var canvas = document.getElementById('canvas');function cre...
javascript学习-SVG
qq_43368682的博客
07-31 3065
SVG简介 SVG是一种图像文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言,本质上是文本文件，体积较小，放大多少都不会失真。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观
SVG JS 动态赋值
卡尔特斯
11-02 876
通过 text 标签进行测试 <svg xmlns="http://www.w3.org/2000/svg" width="600" height="400"> <defs> <!-- 网格 --> <pattern id="grid" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"> <path fill="none" ..
js创建svg元素并插入到html中使用createElementNS
Yetian_2000的博客
06-09 3568
动态创建svg在插入html中
操作svg文件会用到的方法
山峰在前方
08-02 1806
1.获取svgDocument svgDoc = document.getElementById("gird").getSVGDocument();       注：gird是嵌入svg的id号   2. 绑定单击事件，获取鼠标xy坐标 var bg = svgDoc.getElementById("bg");  bg.onclick = function(evt) {bgM
Study JavaScript《JS操作SVG的一些知识》
傻大专栏
11-25 9682
前阵子学习了一下SVG(Scalable Vector Graphics)，希望能借此弥补自己在图形艺术上的不足，当然最后也没有得到什么提高，不过也扩充了一些网页前段技术知识。通过做了一些小的设计项目，也发现SVG可以弥补一些HTML元素的不足，比如倾斜、弧线、动画、复用等等。 虽然SVG和HTML一样都属于XML的一种方言，一些基本的JavaScript对HTML的DOM操作都适用于SVG，但
SVG基础以及使用Javascript DOM操作SVG
热门推荐
多多
06-30 3万+
简介在HTML中使用SVG " style="">分组元素 解决text文本排版问题 通过Javascript DOM控制SVG 设置文本获取元素高宽和坐标事件处理自定义的z-index层级属性更多DOM API为什么不使用jQuery？ 简介 首先要明白SVG是基于XML格式定义图像的一种技术，并且是矢量的，也就是说在不同分辨率下都显示得很好。想到这里，有
SVG 基础知识汇总
seacean2000的专栏
11-15 1470
容器元素：将不同的元素组合起来使用。    defs:预定义将要使用的元素集合，接下来要使用这个集合，通常和use结合起来使用。    g：将相关的元素图形组合起来，形成一个整体。 图形引用元素：用对不同的文档或元素的引用作为其图形内容的图形元素。    image:用于将其他图像的文件内容包括在一个已定义的矩形中。    use：与defs元素配合使用，来实例化前面定义但是还没
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值