在 SVG 中编写 <path> 数据(读取和修改)

IT技术 javascript graphics svg scalable
2021-03-09 15:02:37

真的有人能帮我吗?我一直在寻找为我的 SVG 运行脚本的方法。但是我得到的所有东西都不匹配!它没有包含足够的信息,为什么他使用这组代码。例如,一个使用 event.target,另一个使用 event.getTarget(),另一个使用 event.target.firstchild.data。任何人都可以帮助我吗?

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

是路径 svg 的一个例子吗?我需要的是获取这些坐标,可能将其放入一个变量中,并将其用作另一个 svg 的坐标。那我该怎么做呢?另一件事是如何通过在界面中输入数字来更改这些坐标。

所以我试图寻找答案,但就像我说的,我没有找到我需要的信息,或者我只是不明白它向我展示了什么。

2个回答

听起来你可能有四个问题:

  1. 如何在 SVG 文件中嵌入脚本?
  2. 如何在 SVG 文件中运行脚本?
  3. 如何<path>从脚本访问元素的数据
  4. 如何<path>从脚本操作元素的数据

让我们一次解决一个问题:


如何在 SVG 文件中嵌入脚本?

SVG 规范中所述,您可以<script>在文档中放置一个元素以包含 JavaScript 代码。根据最新的 SVG 规范,您无需type为脚本指定属性它将默认为type="application/ecmascript".

  • 其他常见的 mime 类型包括"text/javascript", "text/ecmascript"(在 SVG 1.1 中指定)"application/javascript"、 和"application/x-javascript"我没有关于浏览器支持所有这些或type完全省略属性的详细信息我一直很成功text/javascript

与 HTML 一样,您可以将脚本代码直接放在文档中,也可以引用外部文件。执行后者时,您必须为 URI使用一个href属性(不是src),并且该属性在xlink命名空间中。

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <script xlink:href="/js/mycode.js" />
  <script><![CDATA[
    // Wrap the script in CDATA since SVG is XML and you want to be able to write
    // for (var i=0; i<10; ++i )
    // instead of having to write
    // for (var i=0; i&lt;10; ++i )
  ]]></script>
</svg>

如何在 SVG 文件中运行脚本?

与 HTML 一样,SVG 文档中包含的代码将在遇到时立即运行。如果你把你的<script>元素你的文档的其余部分上面(正如你可能时,把<script><head>HTML文档的),那么不关你的文档元素会在你的代码运行时可用。

避免这种情况的最简单方法是将<script>元素放在文档底部:

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- all SVG content here, above the script -->
  <script><![CDATA[
    // Now I can access the full DOM of my document
  ]]></script>
</svg>

或者,您可以在文档的顶部创建一个回调函数,该函数仅在文档的其余部分准备就绪时调用:

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
  <title>SVG Coordinates for Embedded XHTML Elements</title>
  <script>document.documentElement.addEventListener('load',function(){
    // This code runs once the 'onload' event fires on the root SVG element
    console.log( document.getElementById('foo') );
  },false)</script>
  <path id="foo" d="M0 0" />
</svg>

如何<path>从脚本访问元素的数据

有两种方法可以访问关于 SVG 中元素的大部分信息:您可以通过标准 DOM Level 1 Core 方法将属性作为字符串访问getAttribute(),或者您可以使用SVG DOM 对象和方法让我们看看两者:

通过访问路径数据 getAttribute()

UsinggetAttribute()返回与查看源代码时看到的相同的字符串:

<path id="foo" d="M150 0 L75 200 L225 200 Z" />
<script><![CDATA[
  var path = document.getElementById('foo');
  var data = path.getAttribute('d');
  console.log(data);
  //-> "M150 0 L75 200 L225 200 Z"
]]></script>
  • 优点:调用非常简单;你不必了解 SVG DOM
  • 缺点:因为你得到一个字符串,你必须自己解析属性;对于 SVG<path>数据,这可能会令人难以忍受。

通过 SVG DOM 方法访问路径数据

<path id="foo" d="M150 0 L75 200 L225 200 Z" />
<script><![CDATA[
  var path = document.getElementById('foo');

  // http://www.w3.org/TR/SVG/paths.html#__svg__SVGAnimatedPathData__normalizedPathSegList
  // See also path.pathSegList and path.animatedPathSegList and path.animatedNormalizedPathSegList
  var segments = path.normalizedPathSegList ;

  for (var i=0,len=segments.numberOfItems;i<len;++i){
    var pathSeg = segments.getItem(i);
    // http://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSeg
    switch(pathSeg.pathSegType){
      case SVGPathSeg.PATHSEG_MOVETO_ABS:
        // http://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSegMovetoAbs
        console.log("Move to",pathSeg.x,pathSeg.y);
      break;
      case SVGPathSeg.PATHSEG_LINETO_ABS:
        // http://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSegLinetoAbs
        console.log("Line to",pathSeg.x,pathSeg.y);
      break;
      case SVGPathSeg.PATHSEG_CLOSEPATH:
        // http://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSegClosePath
        console.log("Close Path");
      break;
    }
  }
]]></script>

上面的脚本产生以下输出:

Move to 150 0
Line to 75 200
Line to 225 200
Close Path
  • 优点:为您解析路径数据;您可以从 API 本身获得确切的数字;usingnormalizedPathSegList接受相对命令并使它们对你来说是绝对的;如果 SMIL 动画正在更改路径数据,则使用非动画 pathSegList 可以让您访问无法通过getAttribute().

  • 缺点:甜蜜的黑猩猩着火了,看看那个代码!这甚至不能处理所有可能的可用路径段。

因为很难阅读 SVG DOM 的 W3C 规范,所以多年前我创建了一个在线工具来浏览存在哪些属性和对象。你可以在这里使用它:http : //objjob.phrogz.net/svg/hierarchy


如何<path>从脚本操作元素的数据

与上面类似,您可以创建一个新字符串并用于setAttribute()将其推送到对象上,也可以操作 SVG DOM。

使用路径数据操作 setAttribute()

<path id="foo" d="M150 0 L75 200 L225 200 Z" />
<script><![CDATA[
  var path = document.getElementById('foo');
  path.setAttribute('d','M150,0 L150,100 200,300 Z');
]]></script>

使用 SVG DOM 操作路径数据

<path id="foo" d="M150,0 L75,200 l150,0 Z" />
<script><![CDATA[
  var path = document.getElementById('foo');
  var segments = path.pathSegList;
  segments.getItem(2).y = -10;
]]></script>

一般来说,你只需要修改各个SVGPathSeg子类实例的属性即可更改会立即在 DOM 中进行。(在上面的例子中,原始三角形随着最后一点稍微向上移动而倾斜。)

当您需要创建新的路径段时,您需要使用类似的方法var newSegment = myPath.createSVGPathSegArcAbs(100,200,10,10,Math.PI/2,true,false),然后使用其中一种方法将该段粘贴到列表中,例如segments.appendItem(newSegment)

2021-04-26 15:02:37
已弃用的 SVG pathSegList 的替代方法:stackoverflow.com/questions/34352624/...
2021-04-26 15:02:37
谢谢,谢谢。但是,这些对嵌入式 SVG 也有效吗?
2021-05-08 15:02:37
@LeiLeyba 这是另一个示例,它在 XHTML 中嵌入了 SVG 以操作 path
2021-05-16 15:02:37
建议使用新的 getPathData 和 setPathData API 而不是旧的 pathSegList API。新的 API 效率更高,可用性更好。使用路径数据 polyfill来处理新的 API。
2021-05-18 15:02:37

具有 Javascript 和 Css 支持的 SVG 中的动态路径元素

var XMAX = 500;
    var YMAX = 500;
    var _xx=10;
    var _reg=100;
    var _l=10;
    // Create PATH element
    for(var x=1;x<20;x++)
    {
    var pathEl = document.createElementNS("http://www.w3.org/2000/svg", "path");
    pathEl.setAttribute('d','M'+_l+' 100 Q 100  300 '+_l+' 500' );
    pathEl.style.stroke = 'rgb('+(_reg)+',0,0)';
    pathEl.style.strokeWidth = '5';
    pathEl.style.fill = 'none';
        $(pathEl).mousemove(function(evt){$(this).css({"strokeWidth":"3","stroke":"#ff7200"}).hide(100).show(500).css({"stroke":"#51c000"})});

    document.querySelector('svg').appendChild(pathEl);
    _l+=50;
    }

在 jsfiddle 中演示

同意@Kennedy...这个例子提出了一些很好的观点,但它有点古怪(什么是XMAX,,YMAX_xx为什么?为什么不使用边界框声明 svg 元素?所以我们得到一个默认的 300x150 视图显示那些很酷的二次曲线的几乎线性的部分......)
2021-04-29 15:02:37
一个奇怪的例子,但我会接受。
2021-05-09 15:02:37