1

Have tried below code to generate SVG image

<path fill="transparent" stroke="#000" stroke-width="1.5"
            d="M15 3
               Q16.5 6.8 25 18
               A12.8 12.8 0 1 1 5 18
               Q13.5 6.8 15 3z" />

    var pat = "M"+15+" "+3+" "+ "Q"+ 16.5 +" "+6.8+ " " + 25 + " " +18+ " "+"A" + 12.8 + " " + 12.8+ " " + 0 + " " + 1  + " " + 1 + " " + 5  + " " +18+ " " +"Q" + 13.5 + " " + 6.8 + " " + 15 + " " + 3 + "Z";

      e.append("path").attr("d", pat); 

and got below image enter image description here

But i need this image

enter image description here

What should i do to make it as same as second image.

9
  • 1
    scale it in the y axis using a transform. Jul 25, 2019 at 9:34
  • Can you elaborate your answer
    – Ambika
    Jul 25, 2019 at 9:43
  • What is it about the comment you don't understand? Jul 25, 2019 at 9:45
  • d="M15 3 Q16.5 6.8 25 18 A12.8 12.8 0 1 1 5 18 Q13.5 6.8 15 3z" In which section need to change please explain
    – Ambika
    Jul 25, 2019 at 9:49
  • None of it. Add a transform attribute to the path. Jul 25, 2019 at 9:51

1 Answer 1

1

After trying so many coordinates value i found the exact coordinate for creating drop svg

Here is the code:

<svg height="1010" width="500">
<path fill="transparent" stroke="#000" stroke-width="1.5"
        d="M297.5 3        
           Q297.5 6.8 410.5 150           
           A120.8 102.8 0 1 1 210 148           
           Q297.5 6.8 297.5 3z"       
           />
</svg>

Happy coding !!!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.