CODEWITHSUNDEEP
angularjssvg
srgbnd
srgbnd

Reputation: 5614

How to make SVG element clickable?

Angular 1.6

I want to make the following SVG element clickable:

         <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" 
            xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30.2 34.1" 
            style="enable-background:new 0 0 30.2 34.1;" xml:space="preserve">
            <rect x="19.4" y="0" width="10.8" height="5.4"/>
            <rect x="19.4" y="14.3" width="10.8" height="5.4"/>
            <rect x="19.4" y="28.7" width="10.8" height="5.4"/>
            <rect x="0.2" y="0" width="10.8" height="5.4"/>
            <rect x="0.2" y="14.3" width="10.8" height="5.4"/>
            <rect x="0.2" y="28.7" width="10.8" height="5.4"/>
          </svg>

If not Angular it works by simply enclosing it like this <a href="http://example.com"><svg>...</svg></a>. But the svg graphics simply dissapears if I do the same in Angular.

Also I tried <use> with no success: 

<svg ...>
<use xlink:href="" ng-attr-xlink:href="{{$ctrl.menu.channels}}" />
...
</svg>

How to make my svg element clickable attaching a link to it?

Upvotes: 2

Views: 1029

Answers (1)

Yaser
Yaser

Reputation: 5719

Your first approach was OK, you just need a bit of additional CSS:

<a href="#" class="svg">
  <svg version="1.1" id="Layer_1">...</svg>
</a>

And in your css:

a.svg:after {
  content: ""; 
  position: absolute; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
}

Upvotes: 2

Related Questions