Question

我正在尝试制作一个使用交互式SVG（可点击/等）的双圈维恩图，灵感来自这里：https://stackoverflow.com/a/29473362/4309550

我的问题是，你如何能够获得在SVG元素中发布的漫长而复杂的路径，并且在不使用像illustrator这样的工具的情况下很容易获得这些路径（因为我没有插图/ photoshop？）我尝试使用发布的stackoverflow页面中给出的示例中的路径d值，但没有成功。任何帮助将不胜感激。

Answer 1

即使使用圆圈，您也可以检测到哪个部分已被点击。这个答案是从maioman的原文中扩展而来的，其中包含一个警报，用于计算相关点存在多少重叠圆圈。

＆＃13;

var svg = document.getElementsByTagName('svg')[0];
svg.setAttribute("width", "100%");
svg.setAttribute("height", "100%");

function go(e) {
    var count = 1;
    e.target.style.pointerEvents = "none";
    var t2 = document.elementFromPoint(e.clientX, e.clientY);
    if (t2 instanceof SVGCircleElement) {
        ++count;
    }
    t2.style.pointerEvents = "none";
    var t3 = document.elementFromPoint(e.clientX, e.clientY);
    if (t3 instanceof SVGCircleElement) {
        ++count;
    }
    e.target.style.pointerEvents = "visiblePainted";
    t2.style.pointerEvents = "visiblePainted";
    alert(count);
}

function circle(arr,rad, c) {
    var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'circle');
    newElement.setAttribute("cx", arr[0]);
    newElement.setAttribute("cy", arr[1]);
    newElement.setAttribute("r", rad);
    newElement.style.fill = c;
    newElement.style.stroke = 'black';
    newElement.addEventListener("click", go, false);
    svg.appendChild(newElement);

}

circle([80, 80], 30, 'rgba(255,0,255,0.3)');
circle([100, 80], 30, 'rgba(255,0,255,0.3)')
circle([90,100], 30, 'rgba(255,0,255,0.3)');
/*you place x,y position as an array in first function argument*/

＆＃13;

<svg></svg>

＆＃13;

Answer 2

有一个特定的circle element in SVG，您可以轻松制作圈子;

这是制作SVG圈子的功能：

＆＃13;

var svg = document.getElementsByTagName('svg')[0];
svg.setAttribute("width", "100%");
svg.setAttribute("height", "100%");


function circle(arr,rad, c) {
    var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'circle');
    newElement.setAttribute("cx", arr[0]);
    newElement.setAttribute("cy", arr[1]);
    newElement.setAttribute("r", rad);
    newElement.style.fill = c;
    newElement.style.stroke = 'black';
    svg.appendChild(newElement);

}

circle([80, 80], 30, 'rgba(255,0,255,0.3)');
circle([100, 80], 30, 'rgba(255,0,255,0.3)')
circle([90,100], 30, 'rgba(255,0,255,0.3)');
/*you place x,y position as an array in first function argument*/

＆＃13;

<svg></svg>

＆＃13;

实际上，您链接到的示例是使用不同的路径制作的，以便在悬停时添加动画

编辑：

我想到的最简单的解决方法是解决您的问题，即创建2个圆圈和一个重叠的双弧来表示交叉点：

＆＃13;

svg > *:hover {
    fill:#00ff00
}

＆＃13;

<svg width="325px" height="325px" xmlns="http://www.w3.org/2000/svg">
    <circle cx='58' cy='100' r='30' stroke='rgba(255, 0, 255, 0.4)' stroke-width='1px' fill='#fff' />
    <circle cx='102' cy='100' r='30' stroke='rgba(255, 0, 255, 0.4)' stroke-width='1px' fill='#fff' />
    <path d="M80 80
           A 30 30, 0, 0, 1, 80 120
            M80 80
           A 30 30, 0, 0, 0, 80 120
           " stroke='rgba(255, 0, 255, 0.4)' stroke-width='1px' fill='#fff' />
</svg>

＆＃13;

SVG：如何制作路径/获取路径的点数

2 个答案:

编辑：

fiddle