SVG标记方向箭头出现在DOM中，但标记本身不可见
SVG标记方向箭头出现在DOM中，但标记本身不可见
提问于 2021-11-30 02:02:46
我正在使用d3在svg路径上创建方向箭头。我使用路径字符串和svg-路径特性 npm包获得起始点。然后，我将这些点推送到一个数组中，在另一个函数中，我使用d3逻辑将这些点映射到原始的svg路径上，以便在每个点创建三角形。
public mapArrowPoints(): void {
this.arrowPoints.forEach((point: ArrowPointObject) => {
const path = d3.path();
path.moveTo(parseInt(point.x, 10), parseInt(point.y, 10));
path.lineTo(parseInt(point.x, 10) + 8, parseInt(point.y, 10) + 2);
path.lineTo(parseInt(point.x, 10) + 0, parseInt(point.y, 10) + 8);
path.closePath();
const svg = d3.select('svg#topLevel');
const defs = svg.insert('defs', '#curve');
const marker = defs.append('marker');
marker
.attr('id', 'triangle')
.attr('viewBox', '0 -5 10 10')
.attr('markerWidth', 4)
.attr('markerHeight', 4)
.attr('orient', 'auto')
.append('path')
.attr('d', path.toString())
.attr('fill', 'red')
.attr('stroke', 'black')
.attr('stroke-width', '3px');
svg
.select('#curve')
.attr('marker-start', 'url(#triangle)')
.attr('marker-mid', 'url(#triangle)')
.attr('marker-end', 'url(#triangle)');
});
}现在，当我检查浏览器，我可以看到我的主要路径，但没有三角形。我可以检查DOM，并看到应该附加到的svg、defs、marker和path。我还可以选择标记路径本身，并查看它应该呈现的位置(蓝色框显示三角形应该在哪里)。我不太明白为什么这些三角形没有显示出来。任何帮助都将不胜感激。我创建了一个用于实验解决方案的stackblitz示例。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-11-30 08:28:56
除了有许多具有相同id的标记元素之外，您的标记还有一个viewBox，它使三角形位于标记框之外。一个正确的viewBox，你有一个3单位的行程，将比它的包围框大，所以我会使用‘viewBox=’18514“。您可能需要选择不同的viewBox。
在这里，您可以看到希望用作标记的路径：
svg{border: solid}<svg viewBox="18 5 14 14" width="300" >
<path d="M20,7L28,9L20,15Z" fill="red" stroke="black" stroke-width="3"></path>
</svg>
一旦您有了这个标记的wiewBox，您将看到标记，但它落在路径之外。这是因为标记ha、refX和refY属性引用标记自身连接到路径的点。默认情况下，这一点是{0,0}。我用的是refX="18.5“refY="9”。我选择9，因为三角形的顶端有y=9 (d="M20,7L28，9L20,15Z")
在下一个例子中，我用一个金色的圆圈来标记这一点。你可能想选择另一个。
svg{border: solid}<svg viewBox="18 5 14 14" width="300" >
<path d="M20,7L28,9L20,15Z" fill="red" stroke="black" stroke-width="3"></path>
<circle cx="18.5" cy="9" r=".5" fill="gold"/>
</svg>
带标记的路径是这样的：
<svg viewBox="0 0 700 800" >
<defs>
<marker id="triangle" viewBox="18 5 14 14" markerWidth="8" markerHeight="8" orient="auto" refX="18.5" refY="9">
<path d="M20,7L28,9L20,15Z" fill="red" stroke="black" stroke-width="3px"></path>
</marker>
</defs>
<path fill="none" stroke="black" id="curve" d="M 0.05965662,9.8756182 C 665.77394,-70.124378 654.96347,387.98451 654.96347,387.98451 L 45.773941,621.3042 650.91307,783.4508" marker-start="url(#triangle)" marker-mid="url(#triangle)" marker-end="url(#triangle)"></path>
</svg>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70163445
复制相关文章
相似问题
腾讯云开发者
