对于重叠的svg形状，是否可以获取重叠区域的路径坐标？
This intersection library显示了相交的线的点，但是我在整个形状的路径之后，即重叠区域(the brown area here)。
最终，我想重叠多达5个形状，然后使每个重叠区域都能够具有一种悬停状态，从而改变其颜色并添加一个工具提示like this example。在这里，如果检查重叠区域之一上的元素，则可以看到首先以不透明性绘制了完整的椭圆，以创建视觉表示形式重叠。<g id="Main_x5F_Diagram">但是，下面的组本身具有实际重叠区域。<g id="Rollover_x5F_area">
一种想法是在Illustrator中绘制主要形状，然后使用其探路者工具将它们相交或划分为单独的重叠区域。然后，对于每个新的重叠区域，另存为.svg以获取其路径坐标，然后进行清理并将其导入D3。
但是，当然，我更希望仅在D3中绘制形状并使用一些计算或库来获得重叠区域，而无需进行Illustrator练习。我希望我只是不知道某些名为getIntersectedAreaPathCoordinatesPlease的工具，属性或函数:)
感谢您的任何想法。
最佳答案
我发现您的问题出于我自己的目的很有趣，因此我在网络上做了一些研究。
我发现this website可以解释如何在SVG中使用裁剪，并猜测它可以相交(请参阅交集和Union )
基本上，您需要创建一个具有两个形状相交的剪切路径，并将其应用于其中一个。可悲的是，文章说:
但是“直接”一词使我充满信心，您应该找到解决问题的方法:)
编辑:添加了源代码的修改版本，以说明重叠和悬停行为。
rect:hover {
fill: red
}<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
width="200" height="200"
viewBox="0 0 200 200" >
<!-- Matthew Bystedt http://apike.ca 2012 -->
<!-- Pattern Definition -->
<defs>
<pattern id="checkerPattern" patternUnits="userSpaceOnUse"
x="0" y="0" width="20" height="20"
viewBox="0 0 10 10" >
<rect x="0" y="0" width="5" height="5" fill="lightblue" />
<rect x="5" y="5" width="5" height="5" fill="lightblue" />
</pattern>
<radialGradient id="myFillGrad" r="100%" spreadMethod="reflect">
<stop offset="5%" stop-color="blue" stop-opacity="0.5" />
<stop offset="95%" stop-color="midnightblue" />
</radialGradient>
<clipPath id="clip1">
<polygon id="clip1Shape" points="100,10 40,180 190,60 10,60 160,180 100,10" stroke="blue" />
</clipPath>
<clipPath id="clip2">
<circle id="clip2Shape" cx="100" cy="100" r="65" />
</clipPath>
<!-- Union -->
<clipPath id="clipUnion">
<use x="0" y="0" width="200" height="200" xlink:href="#clip1Shape" />
<use x="0" y="0" width="200" height="200" xlink:href="#clip2Shape" />
</clipPath>
<!-- Intersection -->
<clipPath id="clipIntersection" clip-path="url(#clip1)">
<use x="0" y="0" width="200" height="200" xlink:href="#clip2Shape" />
</clipPath>
</defs>
<!-- Background -->
<rect x="0" y="0" width="100%" height="100%" fill="url(#checkerPattern)" />
<!-- Examples -->
<rect x="10" y="10" width="180" height="180" fill="url(#myFillGrad)" clip-path="url(#clip1)" transform="translate(-50)"/>
<rect x="10" y="10" width="180" height="180" fill="url(#myFillGrad)" clip-path="url(#clip2)" transform="translate(0,-40)"/>
<rect x="10" y="10" width="180" height="180" fill="url(#myFillGrad)" clip-path="url(#clipIntersection)" transform="translate(50,0)" />
<rect x="10" y="10" width="180" height="180" fill="url(#myFillGrad)" clip-path="url(#clipUnion)" transform="translate(0,40)" />
<text x="100" y="95%" fill="black" font-size="25" text-anchor="middle">overlap</text>
</svg>关于javascript - svg-获取重叠形状区域的路径坐标，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31858409/