svg怎么根据node获得属性

— ownerDocument属性

通过引用该属性获得当前SVG文件的文档对象，也就是得到SVG的DOM结构。

使用举例：svgdoc = evttargetownerDocument

— getOwnerDocument()方法

通过调用该方法获得当前SVG文件的文档对象，也就是得到SVG的DOM结构。

使用举例：svgdoc = evttargetgetOwnerDocument()

可以通过获取g标签的第一个子节点，用它的x,y坐标。或者把g标签换成svg标签，这样可以获取x,y的坐标值。

<svg >

<svg id="g1" x=20 y=20>

<rect id="1"></rect>

<rect id="2"></rect>

<rect id="3"></rect>

</svg>

<svg >

documentgetElementById("g1")xanimValvalue;

之前普通dom节点用jquery来写，svg之类的节点 *** 作用d3js来写，然后现在尝试写一个小组件，就想写个不依赖任何库的版本。

之前用d3js来写可视化组件，有着库依赖的问题，这次想自己把库的依赖去掉，用原生态javascript写。

然后第一件事情我就懵逼了，用jquery的 $("<svg></svg> ) 生成也是一样。

然后出来的是一个普通标签名叫svg的标签，没有svg的任何渲染

而本来应该是下图的效果的。

然后就顺便普及了svg的知识，svg虽然和dom元素很像，但是实际上是xml，它比html更加严格，有着自己的命名空间，如果你在html里面直接写，那么会被加上命名空间解析，如果你想要用js来创建，那么你就得自己来写。

我写的是一个词云插件，我的算法是根据一个text来判断碰撞与否，所以我要知道两个text的位置和高度和宽度。

对于普通的元素，可以通过jquerycss("width")来实现，但是这个对于svg元素，jquery也再一次失效。而这个时候，getBoundingClientRect()，就起效了。

本文是学习和使用svg的一些总结，不介绍svg作图的方法。

svg标签元素参考： MDN - svg

结构化标签也可参考： SVG中的结构化、分组和引用元素

svg的icon方案，参考： 腾讯干货！超实用的高清图标SVG解决方案全总结（下）

svg与普通html元素不同，需要指定命名空间，所以使用 createElement() 、 appendChilde() 抑或JQ的 append() 方法添加到dom上的svg元素是无法正常显示的。需要用到 createElementNS(ns,'svg') ，另外有些svg标签也需要单独的命名空间，例如a标签。为了避免每次添加这么长的命名空间，使用时可以简单包装下( NS_SVG 、 NS_XLINK 分别为svg和a标签命名空间)：

SVG如果是嵌套在HTML中的话，即使用svg标签，会和其他dom元素共用一个document对象，因此可以直接通过该对象来获取到SVG元素对象；如果使用object、embed、iframe标签来引入svg,则其中的内容会有自己document对象，此时的 *** 作需要借助 getSVGDocument() 方法：

对于object、iframe来引入的svg对象，还可以使用 contentDocumnet 属性来获取。当然，contentDocument不是专为svg设计的，同时可以获取其他内嵌xml、html对象。

*** 作的前提需要满足 同源策略(Same-origin policy) ，跨域将无法获取document对象。

平移和缩放表面看起来很简单，svg的平移缩放机制也不复杂，但是dom元素往往不固定宽度，应用场景也多变。例如有时候我们希望随浏览器响应，svg按照比例自动缩放；有时候我们希望为svg添加手动缩放功能或者手动拖拽平移功能（类似于百度地图的缩放平移机制）。

关于svg的viewBox相关知识，张鑫旭有篇文章讲的很详细： 理解SVG viewport,viewBox,preserveAspectRatio缩放 。这里谈谈在具体的应用场景中如何利用这些属性。

这个是由于你的svg文件里有一个自定义的节点<point>xxx</<point>,而batik不认它。。

我是用一个比较粗暴的办法，先把svg字符串里的这些自定义节点删掉:

  简易的剔除未定义节点的方法

  @param svg      原始svg

  @param nodeName 需要剔除的节点

  @return

 /

public static String cutNode(String svg, String nodeName) {

    int b, e = 0;

    int len = nodeNamelength() + 3;

    String strB = "<" + nodeName + ">";

    String strE = "</" + nodeName + ">";

    StringBuilder sb = new StringBuilder();

    do {

        b = svgindexOf(strB, e);

        if (b < 0) {

            break;

        }

        sbappend(svgsubstring(e, b));

        e = svgindexOf(strE, b) + len;

    } while (true);

    sbappend(svgsubstring(e));

    return sbtoString();

}

svg = cutNode(svg, "point");

以上就是关于svg怎么根据node获得属性全部的内容，包括:svg怎么根据node获得属性、SVG中如何获取元素的坐标、svg元素的基础 *** 作等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！