How to link to SVG objects?

Asked

Viewed 259 times

3

I have this path:

<path d="M314.24,438.85l6.25-12.02l0.23-10.1l11.66-7.52h6.53l5.13-8.69l0.93-16.68l-2.1-4.46l12.36-11.28l0.47-12.45l-16.79-8.22l-20.28-6.34l-9.56-0.94l2.57-5.4l-0.7-8.22l-2.09-0.69l-3.09,6.14l-1.62,2.03l-4.16-1.84l-13.99,4.93l-4.66-5.87l0.75-6.13l-4.4,4.48l-4.86-2.62l-0.49,0.69l0.01,2.13l4.19,2.25l-6.29,6.63l-3.97-0.04l-4.02-4.09l-4.55,0.14l-0.56,4.86l2.61,3.17l-3.08,9.87l-3.6,0.28l-5.73,3.62l-1.4,7.11l4.97,5.32l0.91-1.03l3.49-0.94l2.98,5.02l8.53-3.66l3.31,0.19l2.28,8.07l12.17,3.86l2.1,6.44l5.18,0.62l2.47,6.15l-1.67,5.47l2.18,2.86l-0.32,4.26l5.84-0.55l5.35,6.76l-0.42,4.75l3.17,2.68l-7.6,11.51L314.24,438.85L314.24,438.85z" stroke="#818181" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.25" fill="#4191b5" original="#4191b5" id="jqvmap1_br" class="jqvmap-region" fill-opacity="1"></path>

I would like to create a link to open a particular web page while being clicked, as I could do this?

javascript svg

1 answer

3


Use element SVG <a> to create a hyperlink to other web pages, files, locations on the same page, email addresses, or any other URL. Is similar to the element HTML <a>.

<span>Abra o link em outra tab ou janela pois o sandbox não permite a navegação externa.</span>

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">

   <a href="https://pt.meta.stackoverflow.com/" target="_blank">
      <path d="M314.24,438.85l6.25-12.02l0.23-10.1l11.66-7.52h6.53l5.13-8.69l0.93-16.68l-2.1-4.46l12.36-11.28l0.47-12.45l-16.79-8.22l-20.28-6.34l-9.56-0.94l2.57-5.4l-0.7-8.22l-2.09-0.69l-3.09,6.14l-1.62,2.03l-4.16-1.84l-13.99,4.93l-4.66-5.87l0.75-6.13l-4.4,4.48l-4.86-2.62l-0.49,0.69l0.01,2.13l4.19,2.25l-6.29,6.63l-3.97-0.04l-4.02-4.09l-4.55,0.14l-0.56,4.86l2.61,3.17l-3.08,9.87l-3.6,0.28l-5.73,3.62l-1.4,7.11l4.97,5.32l0.91-1.03l3.49-0.94l2.98,5.02l8.53-3.66l3.31,0.19l2.28,8.07l12.17,3.86l2.1,6.44l5.18,0.62l2.47,6.15l-1.67,5.47l2.18,2.86l-0.32,4.26l5.84-0.55l5.35,6.76l-0.42,4.75l3.17,2.68l-7.6,11.51L314.24,438.85L314.24,438.85z" stroke="#818181" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.25" fill="#4191b5" original="#4191b5" id="jqvmap1_br" class="jqvmap-region" fill-opacity="1" transform="translate(-150 -300)"></path>
   </a>
   
</svg>

Functional test in Repl.it: https://repl.it/repls/SleepyAcademicSale

  • 1

    Thank you very much for the information Augusto, I will test here!

Browser other questions tagged javascript svg

You are not signed in. Login or sign up in order to post.