问题标签 [pathelement]

我正在开发一个带有反应的 SVG 编辑应用程序。SVG 中的所有文本都转换为 opentype.js 中的路径元素。

在某些时候，某些路径元素的整个边界框突然变黑了。在调查了这个问题后，我发现这是在某些条件下发生的。

• 以 chrome 显示 SVG。
• 将路径元素的填充属性设置为单调颜色（例如，黑色、灰色）
• 将路径元素拆分成更小的部分似乎是正确的

有什么方法可以让路径元素在 Chrome 中正确显示？

我的 Chrome 版本是 85.0.4183.121

我创建了 CSB：https ://codesandbox.io/s/stupefied-cloud-q4ivo?file=/src/App.js

- - 更新 - -

这是实际的屏幕截图。用黑色填充的路径元素在这里。

我找到了答案中写的解决方案。

我试图画一条从一个foreignObject到另一个的路径。

我希望根据每个对象的中心来定向/设置路径，但只能从距离对象一段距离开始。例如，这里是从一个对象到两个不同对象的直线路径：注意路径的起点不同；相反，它已被调整为位于连接两个对象的线上。

如果路径是一条直线，这很容易实现：只需沿着由对象中心点定义的直线在位移 Δr 处开始和结束路径。

但是，在贝塞尔曲线（二次或三次）的情况下，我不确定如何实现这一点。

如果可以使部分路径透明（即为路径的不同部分设置描边颜色），那么可以只使用中心点并将第一个 Δs px 设置为transparent; 但是，我不知道有任何方法可以做到这一点。

或者，如果可以独立于用于计算路径的点设置路径的起点和终点，这将解决所有情况（线性、贝塞尔二次或三次）。

另一种选择可能是使用该dash-array属性，但这需要知道路径的长度。例如，如果路径长度为S，则将 dash-array 设置为x-calc(S-2x)-x也可以达到预期的结果。

有没有办法以编程方式实现这一目标？

我不介意跑腿，所以即使只是指向正确方向的指针也会受到赞赏。