Photoshop Question posted in
The official user guide can be found here.

SVG: how to make a path/get the points for a path – Photoshop

I’m attempting to make a two circle Venn Diagram that has utilizes an interactive SVG (clickable/etc), the inspiration is utilized from here: https://stackoverflow.com/a/29473362/4309550

My question is, how would you be able to get the long and complicated paths that are posted in the SVG element and would it be easy to get these paths without using a tool like illustrator (as I don’t have illustrator/photoshop?) I tried playing around with the path d values in the sample given in the posted stackoverflow page but did not have any success in doing so. Any help would be appreciated.

Tags:

2

Answers


  1. 0

    there’s a specific circle element in SVG with which you can easily make circles;

    here’s a function for making SVG circles:

    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*/
    <svg></svg>

    Actually the example you link to is made with distinct paths so to add animation on hover

    edit:

    the easiest workaround, that comes to my mind,for solving your problem is creating 2 circles and an overlapping double-arc to represent intersection:

    svg > *:hover {
    fill:#00ff00
}
    <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>

    fiddle

    Login or Signup to reply.
  2. 0

    You can detect which section has been clicked on even with circles. This answer is expanded from maioman’s original with an alert which counts how many overlapping circles exist at the point in question.

    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*/
    <svg></svg>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search