Question

对于重叠的svg形状，是否可以获得重叠区域的路径坐标？

This intersection library显示相交的线的点，但是在整个形状的路径后面是重叠区域（{ {3}}）。

最终我想重叠最多5个形状，然后让每个重叠区域都能够有一个悬停状态，改变颜色并添加工具提示the brown area here。在这里，如果您在其中一个重叠区域上检查元素，您可以看到首先使用不透明度绘制完整的椭圆，以创建重叠的可视化表示。 <g id="Main_x5F_Diagram">但是，有一个跟随组的实际重叠区域本身。 <g id="Rollover_x5F_area">

一种想法是在Illustrator中绘制主要形状，然后使用其“路径查找器”工具将它们相交或划分为单独的重叠区域。然后对于每个新的重叠区域，另存为 .svg以获取其路径坐标，然后将其清理并将其带入D3。

但是，当然，我更喜欢在D3中绘制形状并使用一些计算或库来获取重叠区域而无需通过Illustrator练习。我希望我只是不知道一些名为getIntersectedAreaPathCoordinatesPlease的工具或属性或函数：）

感谢您的任何想法。

Answer 1

我发现你的问题很有意思，所以我在网上做了一些研究。

我发现this website解释了如何在SVG中使用剪辑，并猜测它可以交叉（参见 交集和联盟 ）

基本上，您需要创建一个两个形状相交的剪辑路径，并将其应用于其中一个。可悲的是，文章说：

没有直接的方法来交叉3个或更多剪切路径。

但是“直接”一词让我有信心你应该找到解决问题的办法：）

编辑：添加了源代码的修改版本，以说明重叠和悬停行为。

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>

svg - 获取重叠形状区域的路径坐标

1 个答案: