自重叠svg路径
我想知道如何高亮（改变颜色）一个SVG路径的自重叠区域（甚至折线）。实际上，如果我更改路径的不透明度和笔画属性，则自翻转区域的颜色不会改变。
例如，具有以下路径
，重叠区域不是红色-暗色。
以下是我到目前为止发现的，但对解决问题没有帮助。http://www.svgopen.org/2005/papers/abstractsvgopen/index.html#s2。
谢谢
共有1个答案
搅乱不透明度不会有任何帮助，因为路径是在一次传递中呈现的，并且它自己重叠多少次都无关紧要。重要的是像素是否被认为是路径笔划的“内部”。如果是，则给出最终的线条颜色和不透明度。
就我所见，基本上没有很好的简单解决你的问题的方法。最接近的方法是单独绘制所有的线段。这样，您的不透明度技巧将突出显示重叠（使用stroke-opacity而不是opacity)，但是线段之间的连接看起来不是很好。它们会有空隙，你也会看到重叠的效果。
<svg width="500" height="500" fill="none" stroke-opacity="0.6" stroke-width="14" stroke = "red">
<path d="M187 240 L188 240" />
<path d="M188 240 L315 217" />
<path d="M315 217 L317 217" />
<path d="M317 217 L330 306" />
<path d="M330 306 L247 233" />
<path d="M247 233 L258 226" />
<path d="M258 226 L292 222" />
<path d="M292 222 L303 178" />
<path d="M303 178 L353 165" />
</svg>-
我今天刚开始玩SVG，我不知道如何在没有悬停区域重叠问题的情况下使用非矩形形状进行悬停，就像你在我的小提琴中看到的那样。
-
我有一个SVG计时器。有一个路径显示当前状态。但是路径重叠得很厉害，你可以在我附上的截图中看到： 这个屏幕截图的检查器的代码是： SVG的生成方式如下： 编辑：这是来自CCPROG的建议之后的计时器：
-
我有一个SVG元素，它包含两个尺寸和位置完全相同的子元素。两者唯一的区别是它们的颜色：第一个是红色，第二个是绿色。我注意到，即使绿色的圆圈在红色的上面，你仍然可以看到在圆圈的边缘有一点颜色偏移。我有什么办法可以避免这种颜色的变化吗？ 下面是一张屏幕截图，显示了有红圈和没有红圈的情况： 这里还有我用来复制这个的小提琴。 null 欢迎任何不同的想法。
-
我维护了一个用flash编写的绘图工具，该工具将其数据保存为荧光笔工具的一系列点，这些点描述了一条粗大的、填充的徒手/点对点线的轮廓。例如，如果用户画了一条水平线，路径将是从左到右的点序列，然后是向下10像素的线，相同的点序列反向回到原点下方10px，那么路径就关闭了 另一个工具通过将json点列表转换为svg路径来周期性地光栅化Flash的数据。路径命令类似于“M 123,456l 1,2 3,
-
SVG 路径 - <path> <path> 元素用于定义一个路径。 下面的命令可用于路径数据： M = moveto L = lineto H = horizontal lineto V = vertical lineto C = curveto S = smooth curveto Q = quadratic Bézier curve T = smooth quadratic Bézier c
-
所以我有一个超级奇怪的案例（至少对我来说是超级奇怪的）。 SVG路径不包含在SVG元素中。我已经尝试了很多事情来让这个工作，但没有一个是有效的，现在怀疑我错过了什么。 我有一把JS小提琴:https://jsfidle.net/67w3hays/ 正如您所看到的，youtube图标比容器大，因此无法伸长到容器中 代码： 答案的预期结果： 我希望这个SVG路径适合于18宽和18高的容器（或者接近18