Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

export hyperlinks to SVG image map

See original GitHub issue

like this:

Untitled-2022-02-03-0917

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 386 135" width="386" height="135">
  <!-- svg-source:excalidraw -->
  <a xlink:href="https://www.youtube.com/channel/UCC0gns4a9fhVkGkngvSumAQ">
      <rect x="0" y="0" width="386" height="135" fill="#ffffff"></rect><g stroke-linecap="round" transform="translate(10 10) rotate(0 67.5 57.5)"><path d="M1.14 -1.07 C27.95 1.32, 57.81 0.58, 136.13 1.63 M-0.76 0.31 C30.96 0.37, 63.12 -0.05, 134.14 0.7 M134.97 1.21 C134.75 43.38, 134.99 85.96, 133.63 113.43 M135.03 -0.09 C136.31 45.63, 136.42 90.2, 134.05 115.17 M133.37 115.88 C86.56 115.19, 32.43 113.78, 0.62 115.34 M134.92 114 C98.66 114.36, 63.26 113.14, -0.54 114.6 M1.81 115.84 C1.48 77.05, 1.75 40, -1.16 0.54 M0.55 115.76 C-0.47 87.75, 1 59.98, 0.05 0.59" stroke="#000000" stroke-width="1" fill="none"></path></g>
  </a>
  <a xlink:href="https://excalidraw.com">
      <g transform="translate(201 59) rotate(0 87.5 12.5)">
      <text x="0" y="18" font-family="Virgil, Segoe UI Emoji" font-size="20px" fill="#000000" text-anchor="start" style="white-space: pre;" direction="ltr">link to Excalidraw</text></g>
  </a>
  </svg>

Issue Analytics

State:
Created 2 years ago
Reactions:1
Comments:12 (7 by maintainers)

Top GitHub Comments

1reaction

Shoggomocommented, Feb 25, 2022

I wrote the team on discord and your workflows are running now. Now you need someone to review your PR. You could request a review from @dwelle or @ad1992.

1reaction

JRJurmancommented, Feb 18, 2022

Hello - I made a PR for this, if there’s anything I can / should do, would love any reviews or feedback!

For now, there’s no visual icon for the hyperlink, I think that’s something that can be done in a follow up PR if that is really wanted (personally I’d rather not have it, and it seems like there are some issues / contentions about how it should be presented) - also this was easier to do without it 😆.

I’m actually hoping to get this merged in for work purposes, specifically for building C4 diagrams, and this feature would be a huge win for making that happen!

Top Results From Across the Web

SVG Image Map in Wordpress - Hyperlinks do not work

I am trying to set up an interactive map the visitor can use to navigate through scientific methodes. The SVG works flawlessly but...

Create A Responsive Imagemap With SVG - the new code

When choosing to export an SVG containing a bitmap image from Illustrator, ensure that "Link" is chosen as the Image Location option; otherwise, ......

The Many Ways to Link Up Shapes and Images with HTML ...

The simplest way to make a portion of an SVG clickable is to add an SVG hyperlink element to the markup. This is...

Create responsive SVG image maps - Creative Bloq

Integrating SVG into a web page We can cure that by making the SVG responsive. Right now, the SVG map works as a...

The Best Way to Make Image Maps (2020) - Vecta.io

The idea here is to use SVG's built in interactivity and hyperlinks to make everything clickable and even trigger Javascript codes, and then ......