扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > node.js >SVG DOM操作实例分析
  • 723

0
分享到

SVG DOM操作实例分析

2024-04-02 19:04:59 723人浏览 薄情痞子
摘要

这篇文章主要讲解了“SVG DOM操作实例分析”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“SVG DOM操作实例分析”吧！ html页面中的DOM操作

这篇文章主要讲解了“SVG DOM操作实例分析”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“SVG DOM操作实例分析”吧！

html页面中的DOM操作

DOM大家应该很熟悉了，这里先看一个小例子：

复制代码 代码如下:

<head>

<style>

#svGContainer {

width: 400px;

height: 400px;

background-color: #a0a0a0;

}

</style>

<script>

function CreateSVG () {

var xmlns = "Http://www.w3.org/2000/svg";

var boxWidth = 300;

var boxHeight = 300;

var svgElem = document.createElementNS (xmlns, "svg");

svgElem.setAttributeNS (null, "viewBox", "0 0 " + boxWidth + " " + boxHeight);

svgElem.setAttributeNS (null, "width", boxWidth);

svgElem.setAttributeNS (null, "height", boxHeight);

svgElem.style.display = "block";

var g = document.createElementNS (xmlns, "g");

svgElem.appendChild (g);

g.setAttributeNS (null, 'transfORM', 'matrix(1,0,0,-1,0,300)');

// draw linear gradient

var defs = document.createElementNS (xmlns, "defs");

var grad = document.createElementNS (xmlns, "linearGradient");

grad.setAttributeNS (null, "id", "gradient");

grad.setAttributeNS (null, "x1", "0%");

grad.setAttributeNS (null, "x2", "0%");

grad.setAttributeNS (null, "y1", "100%");

grad.setAttributeNS (null, "y2", "0%");

var stopTop = document.createElementNS (xmlns, "stop");

stopTop.setAttributeNS (null, "offset", "0%");

stopTop.setAttributeNS (null, "stop-color", "#ff0000");

grad.appendChild (stopTop);

var stopBottom = document.createElementNS (xmlns, "stop");

stopBottom.setAttributeNS (null, "offset", "100%");

stopBottom.setAttributeNS (null, "stop-color", "#0000ff");

grad.appendChild (stopBottom);

defs.appendChild (grad);

g.appendChild (defs);

// draw borders

var coords = "M 0, 0";

coords += " l 0, 300";

coords += " l 300, 0";

coords += " l 0, -300";

coords += " l -300, 0";

var path = document.createElementNS (xmlns, "path");

path.setAttributeNS (null, 'stroke', "#000000");

path.setAttributeNS (null, 'stroke-width', 10);

path.setAttributeNS (null, 'stroke-linejoin', "round");

path.setAttributeNS (null, 'd', coords);

path.setAttributeNS (null, 'fill', "url(#gradient)");

path.setAttributeNS (null, 'opacity', 1.0);

g.appendChild (path);

var svgContainer = document.getElementById ("svgContainer");

svgContainer.appendChild (svgElem);

}

</script>

</head>

<body onload="CreateSVG ()">

<div id="svgContainer"></div>

</body>

发现了没，与普通的html元素的DOM操作完全一样:

选择元素：document.getElementById

创建元素：document.createElementNS

创建子元素的另外一种方式：element.createChildNS

添加元素：node.appendChild

设置元素的属性：element.setAttributeNS/element.setAttribute

除了上面这几个操作，下面的操作和属性也很常见：

获取元素的属性值： element.getAttributeNS/element.getAttribute

检查元素是否存在某属性：element.hasAttributeNS

移除元素的某属性：element.removeAttributeNS

父元素、子元素和兄弟节点：element.parentNode/element.firstChild/child.nextSibling

这些方法这里不再详细介绍了；此外，DOM树的节点结构，对象之间的继承关系也都是差不多的，就不详述了。需要的同学参看后面的DOM Core Object的文档。

不过，需要注意的是SVG本质上是XML文档，所以基本采用的DOM方法都是带NS结尾的方式，来提供相关的namespace；如果创建元素时已经提供了namespace，而且没有多个namespace的问题，那么设置相关属性的时候，也可以选择使用不带NS的版本，比如直接使用element.setAttribute设置属性值，但是总的来说，还是强烈推荐使用带NS结尾的版本，因为这个版本总是工作正常的，即使是在多namespace的情况下。

SVG DOM

这个与标准的DOM有哪些不同，我也没找到什么全面的资料，目前只知道对属性的赋值方式是不同的。如果有了解这方面的同学还请吱一声啊。

上面的例子中，我们使用element.setAttributeNS/element.setAttribute来给属性赋值，在SVG DOM中，可以使用面向对象的方式，通过访问点号来给对象的属性赋值，比如下面是两种方式的对比：

普通的DOM方式：

复制代码 代码如下:

element.setAttribute("x", "10");

element.setAttribute("y", "20");

element.setAttribute("width", "100%");

element.setAttribute("height", "2em");

而SVG DOM的方式：

复制代码 代码如下:

element.x.baseVal.value = 10;

element.y.baseVal.value = 20;

element.width.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 100);

element.height.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_EMS, 10);

DOM脚本属于传统的脚本，其特征是通过构建“值字符串”来设置各个项。SVG DOM脚本样式的优点是，你不必构建“值字符串”，所以性能优于DOM脚本。

嵌入SVG的脚本

如果要在SVG内部添加脚本，就需要使用script元素，这个前面已经讲过了，除了这一点，基本上与把脚本放到外面的HTML中是一样的。看一个例子：

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

</head>

<body>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">

<script type="text/ecmascript">

<![CDATA[

function showRectColor() {

alert(document.getElementById("myBlueRect").getAttributeNS(null,"fill"));

}

function showRectArea(evt) {

var width = parseFloat(evt.target.getAttributeNS(null,"width"));

var height = parseFloat(evt.target.getAttributeNS(null,"height"));

alert("The rectangle area is: " + (width * height));

}

function showRootChildrenNr() {

alert("Nr of Children: "+document.documentElement.childNodes.length);

}

]]>

</script>

<g id="firstGroup">

<rect id="myBlueRect" width="100" height="50" x="40" y="20" fill="blue" onclick="showRectArea(evt)"/>

<text x="40" y="100" onclick="showRectColor()">Click on this text to show rectangle color.</text>

<text x="40" y="130">Click on rectangle to show rectangle area.</text>

<text x="40" y="160" onclick="showRootChildrenNr()">Click on this text to show the number of child

<tspan x="40" dy="20">elements of the root element.</tspan></text>

</g>

</svg>

</body>

</html>

在这个例子中，列举了常见的获取DOM对象的方式：

1. 通过document.getElementById或者document.getElementByClassName之类的方法获取对象；

2. 通过document.documentElement或者document.rootElement获取document对象；

3. 通过事件参数evt.target获取产生事件的对象。这种方式的优点就是不使用id就可以获取到产生事件的对象。

其余的脚本基本和普通的DOM是一样的。

感谢各位的阅读，以上就是“SVG DOM操作实例分析”的内容了，经过本文的学习后，相信大家对SVG DOM操作实例分析这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！

--结束END--

本文标题: SVG DOM操作实例分析

本文链接: https://lsjlt.com/news/94239.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • SVG DOM操作实例分析
    这篇文章主要讲解了“SVG DOM操作实例分析”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“SVG DOM操作实例分析”吧！ HTML页面中的DOM操作 ...
    99+
    2024-04-02
  • Manipulation TypeScript DOM操作实例代码分析
    这篇文章主要介绍了Manipulation TypeScript DOM操作实例代码分析的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Manipulation TypeScript DOM操...
    99+
    2023-07-05
  • jQuery操作DOM的示例分析
    这篇文章主要介绍jQuery操作DOM的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！jQuery的选择器很强大，用起来又简单又灵活，但是搞了这么久，我拿到了jQuery对象...
    99+
    2024-04-02
  • JavaScript中DOM操作的示例分析
    这篇文章主要介绍JavaScript中DOM操作的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！具体如下：一、DOM概念1. "D":Docment,指的...
    99+
    2024-04-02
  • JavaScript中DOM操作常用事件实例分析
    这篇文章主要讲解了“JavaScript中DOM操作常用事件实例分析”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript中DOM操作常用事件实例分析”吧！由此可以看出事件分三个...
    99+
    2023-06-30
  • HTML5中SVG DOM及DOM操作是怎样的
    HTML5中SVG DOM及DOM操作是怎样的，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。 使用脚本可以很...
    99+
    2024-04-02
  • jQuery中CSS-DOM操作的示例分析
    这篇文章主要为大家展示了“jQuery中CSS-DOM操作的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“jQuery中CSS-DOM操作的示例分析”这篇文章吧。除了css()以外，还有...
    99+
    2023-06-29
  • JavaScript DOM元素常见操作的示例分析
    这篇文章主要介绍JavaScript DOM元素常见操作的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！具体如下：DOM概念DOM（Document Object Model...
    99+
    2024-04-02
  • Javascript操作dom对象之select的示例分析
    小编给大家分享一下Javascript操作dom对象之select的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！htm...
    99+
    2024-04-02
  • vue指令以及dom操作的示例分析
    这篇文章给大家分享的是有关vue指令以及dom操作的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。“AngularJS 通过被称为 指令 的新属性来扩展 HTML。Ang...
    99+
    2024-04-02
  • Manipulation-TypeScript DOM操作示例解析
    目录DOM Manipulation对 HTMLElement 类型的探索基础案例Document 接口Document.getElementByIdDocument.createE...
    99+
    2023-03-06
    Manipulation TypeScript DOM Manipulation TypeScript
  • js中DOM事件常见操作的示例分析
    这篇文章主要介绍js中DOM事件常见操作的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！一、JavaScript的组成JavaScript基础分为三个部分：ECMAScrip...
    99+
    2024-04-02
  • JavaScript的DOM实例分析
    这篇文章主要介绍了JavaScript的DOM实例分析的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JavaScript的DOM实例分析文章都会有所收获，下面我们一起来看看吧。...
    99+
    2024-04-02
  • canvas与svg使用实例分析
    这篇文章主要介绍了canvas与svg使用实例分析的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇canvas与svg使用实例分析文章都会有所收获，下面我们一起来看看吧。 　　...
    99+
    2024-04-02
  • jQuery常见面试题之DOM操作的示例分析
    这篇文章主要为大家展示了“jQuery常见面试题之DOM操作的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“jQuery常见面试题之DOM操作的示例分析...
    99+
    2024-04-02
  • redis原子操作实例分析
    这篇“redis原子操作实例分析”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“redis原...
    99+
    2024-04-02
  • mul乘法操作实例分析
    这篇“mul乘法操作实例分析”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“mul乘法操作实...
    99+
    2024-04-02
  • C#原子操作实例分析
    这篇文章主要讲解了“C#原子操作实例分析”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“C#原子操作实例分析”吧！知识点竞争条件当两个或两个以上的线程访问共享数据，并且尝试同时改变它时，就发生...
    99+
    2023-06-29
  • golang中json操作实例分析
    这篇“golang中json操作实例分析”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“golang中json操作实例分析”文...
    99+
    2023-07-02
  • DOM的示例分析
    这篇文章将为大家详细讲解有关DOM的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。DOM(Document Object Modle) 操作文档的编程接口DOM定...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作