代码之家 › 专栏 › 技术社区 › SBB

带标记的javascript动态SVG

svg javascript

SBB · 技术社区 · 6 年前

我有一些JavaScript正在生成一些数据的SVG路径,以显示作业进度。我有显示一个框与另一个框之间连接的行,但是我无法添加标记箭头。

我使用以下结构引用箭头:

<svg id="svg1" width="0" height="0">
  <defs>
      <marker id="Triangle" viewBox="0 0 10 10" refX="1" refY="5" 
              markerUnits="strokeWidth" markerWidth="4" markerHeight="3"
              orient="auto">
        <path d="M 0 0 L 10 5 L 0 10 z" fill="context-stroke"/>
      </marker>
    </defs>
    <path id="path1" class="path" marker-end="url(#Triangle)" fill="none" stroke-width="10"/>
</svg>

问题是,它没有正确生成三角形,看起来像是一个截正方形?三角形应该在右下角,因为路径将上盒连接到下盒。

JS Fiddle:

http://jsfiddle.net/qLhunt7k/

你知道为什么它不像我期望的三角形吗?

1 回复 | 直到 6 年前

Paul LeBeau 6 年前

您的问题是由以下几个因素造成的:

标记位于SVG的底部,因为您的行结束于SVG的底部。标记的偏移量( refX 和 refY )在箭头的底部。所以标记被画出来,这样它的底部(最宽的部分)就放在了线的末端。所以你只能看到上面的像素。
通过设置 overflow: visible 在SVG上。但你也必须对 #svgContainer 集装箱舱
```
#svgContainer {
  ...
  overflow: visible;
}

#svgContainer svg {
  overflow: visible;
}
```
另一种选择是不要一路画到底。以便在底部留出空间,以便绘制标记。将路径生成器更改为如下内容:
```
" V" + (endY-30));
```
我在这里用了30,因为它符合 stroke-width 属于 0.7em . 我建议您将CSS更改为使用 px 价值为 笔划宽度 . 否则,将来更改字体大小可能会再次破坏标记。

如果选择此方法,则在计算SVG宽度时还需要为标记留出水平空间。如:
```
if (svg.getAttribute("width") < (endX + stroke * 3))
   svg.setAttribute("width", (endX + stroke * 3));
```
下一步, path {} 规则导致问题。关于 path 是过度骑 fill="context-stroke" 标记定义中的属性。这导致标记有一个很大的笔画,它再次溢出标记边界,使其看起来像一个矩形。解决办法是去掉 路径{} 风格。
```
path {
}
```
最后剩下的问题是 fill=“上下文笔划” .这是一个新的SVG2,目前还没有得到很好的支持。例如,它可以在Chrome上工作,但似乎还不能在Firefox上工作。所以现在,我建议只使用简单的填充标记定义。
```
<marker id="Triangle" viewBox="0 0 10 10" refX="0" refY="5" 
        markerUnits="strokeWidth" markerWidth="4" markerHeight="3"
        orient="auto">
  <path d="M 0 0 L 10 5 L 0 10 z" fill="#000"/>
</marker>
```