svg路径元素的编号

问题描述 投票：0回答：2

我有以下带有定义标记和不同路径的svg文件。 

<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="629" version="1.1" xmlns:xlink= "http://www.w3.org/1999/xlink">
<defs>
    <marker id="start" viewBox="0 0 42 42" refX="10" refY="20" markerWidth="20" markerHeight="20">
      <rect width="20" height="20" fill="#000"></rect>
      <text x="10" y="10" font-family="Verdana" font-size="10" fill="#fff" text-anchor="middle" alignment-baseline="central" class="number"></text>
    </marker>
</defs>

<path d="M110 543 L98 366" stroke="#E42522" stroke-width="2" stroke-dasharray="20,5" fill="none" marker-end="url(#dot)" marker-start="url(#start)" />
<path d="M172 544 L139 454 L140 420 L144 357 L146 283" stroke="#E42522" stroke-width="2" stroke-dasharray="20,5" fill="none" marker-end="url(#dot)" marker-start="url(#start)"/>
<path d="M151 447 L171 403 L174 326 L164 284 L158 279" stroke="#E42522" stroke-width="2" stroke-dasharray="20,5" fill="none" marker-end="url(#dot)" marker-start="url(#start)"/>
<path d="M234 571 L224 520 L244 465 L256 404 L248 361 L234 307 L236 256" stroke="#E42522" stroke-width="2" stroke-dasharray="20,5" fill="none" marker-end="url(#dot)" marker-start="url(#start)"/>
<path d="M383 578 L376 465 L361 430 L325 378 L325 311 L348 234" stroke="#E42522" stroke-width="2" stroke-dasharray="20,5" fill="none" marker-end="url(#dot)" marker-start="url(#start)"/>
<path d="M376 435 L380 356 L365 331 L358 284 L354 240" stroke="#E42522" stroke-width="2" stroke-dasharray="20,5" fill="none" marker-start="url(#start)"/>
</svg>

对于每个路径元素，我希望显示一个带有枚举数字的标记。所以1,2,3 ......

我想通过JavaScript解决它，但收到消息“无法设置未定义的属性'innerHTML'”。 

var number    = document.querySelectorAll('.number');
var polygons  = document.getElementsByTagName("path");

for (var i = 0; i < polygons.length; i++) {
      number[i].innerHTML = i;
      console.log(i);
}

谁能帮助我？

javascript html svg
2个回答
2
投票

您的问题是，您正在使用定义来呈现数字。这有两个含义：

  1. 无论在何处使用此定义，它都会打印same内容，而不是其他内容（例如复制元素）
  2. 定义本身仅存在一次

第一点意味着，您只能将所有数字更改为same值，而不能更改为其他数字（顺便说一句，这似乎是您要执行的操作，因此您无法做到这一点你现在做到了。

[第二个是导致错误的原因：您尝试遍历多个数字，但是，节点列表（从document.querySelectorAll('.number')返回）仅包含一个元素，因为页面的DOM仅发生一次类。因此，您的循环实际上超出了数组范围，从而引发了您提到的错误。

实际上，如果不希望为每个要使用不同编号的元素重复标记，我不知道有什么方法可以解决您的问题。您可以使用Javascript来完成，例如：

var number    = document.querySelectorAll('.number');
var polygons  = document.getElementsByTagName("path");

for (var i = 0; i < polygons.length; i++) {
      var node = number[0].parentNode.cloneNode(true);
      document.getElementsByTagName('defs')[0].appendChild(node);
      node.querySelector('.number').innerHTML = i;
      node.id = 'start' + i;
      polygons[i].setAttribute("marker-start", 'url(#' + node.id + ')');
}

但是，即使该代码有效，如果不仔细考虑解决方案，我可能也不会在生产中使用它。可能会有更好的代码，或者至少看一下此代码可能会中断的地方。

0
投票

您无法更改标记。但是，您可以执行以下操作：

  • 对于每个添加文本元素的路径：x =“ 110” y =“ 543”> text>
  • 文本的x和y值取自d属性：在这种情况下，d =“ M 110 543 L98 366”

或者，您可以选择在单独的组中动态添加这些文本元素。

var number    = document.querySelectorAll('.number');
var polygons  = document.getElementsByTagName("path");

for (var i = 0; i < polygons.length; i++) {
      number[i].innerHTML = i;    
}
svg{border:solid; width:90vh;}
text{font-family:Verdana;font-size:8px;fill:#fff;text-anchor:middle; dominant-baseline:middle}
<svg viewBox="70 230 350 370" >
<defs>
    <marker id="start" viewBox="0 0 42 42" refX="10" refY="10" markerWidth="20" markerHeight="20">
      <rect width="20" height="20"></rect>
    </marker>
</defs>

<path d="M110 543 L98 366" stroke="#E42522" stroke-width="2" stroke-dasharray="20,5" fill="none" marker-end="url(#dot)" marker-start="url(#start)" />
<text class="number" x="110" y="543" ></text>
<path d="M172 544 L139 454 L140 420 L144 357 L146 283" stroke="#E42522" stroke-width="2" stroke-dasharray="20,5" fill="none" marker-end="url(#dot)" marker-start="url(#start)" />
  <text class="number" x="172" y="544" ></text>
<path d="M151 447 L171 403 L174 326 L164 284 L158 279" stroke="#E42522" stroke-width="2" stroke-dasharray="20,5" fill="none" marker-end="url(#dot)" marker-start="url(#start)"/>
  <text class="number" x="151" y="447" ></text>
<path d="M234 571 L224 520 L244 465 L256 404 L248 361 L234 307 L236 256" stroke="#E42522" stroke-width="2" stroke-dasharray="20,5" fill="none" marker-end="url(#dot)" marker-start="url(#start)"/>
  <text class="number" x="234" y="571" ></text>
<path d="M383 578 L376 465 L361 430 L325 378 L325 311 L348 234" stroke="#E42522" stroke-width="2" stroke-dasharray="20,5" fill="none" marker-end="url(#dot)" marker-start="url(#start)" marker-start="url(#start)"/>
  <text class="number" x="383" y="578" ></text>
<path d="M376 435 L380 356 L365 331 L358 284 L354 240" stroke="#E42522" stroke-width="2" stroke-dasharray="20,5" fill="none" marker-start="url(#start)"/>
   <text class="number" x="376" y="435" ></text>
</svg>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.