html svg 객체를 클릭 가능한 링크로 만듭니다.

html svg 객체를 클릭 가능한 링크로 만듭니다.

---

내 HTML 페이지에 SVG 객체가 있고 앵커로 감싸서 svg 이미지를 클릭하면 사용자를 앵커 링크로 안내합니다.

<a href="http://www.google.com/">
    <object data="mysvg.svg" type="image/svg+xml">
        <span>Your browser doesn't support SVG images</span>
    </object>
</a>

이 코드 블록을 사용할 때 svg 객체를 클릭해도 Google로 이동하지 않습니다. IE8 <에서 스팬 텍스트를 클릭 할 수 있습니다.

태그를 포함하도록 svg 이미지를 수정하고 싶지 않습니다.

내 질문은 어떻게 svg 이미지를 클릭 가능하게 만들 수 있습니까?

---

가장 쉬운 방법은 <object>를 사용하지 않는 것입니다. 대신 <img> 태그를 사용하면 앵커가 제대로 작동합니다.

---

실제로 이것을 해결하는 가장 좋은 방법은 <object> 태그에서 다음을 사용하는 것입니다.

pointer-events: none;

참고 : Ad Blocker 플러그인을 설치 한 사용자는 마우스를 올리면 오른쪽 상단에 탭과 같은 [차단]이 표시됩니다 (플래시 배너와 동일). 이 CSS를 설정하면 사라질 것입니다.

http://jsfiddle.net/energee/UL9k9/

---

나는 같은 문제가 있었고 다음과 같이 해결했습니다.

블록 또는 인라인 블록으로 설정된 요소로 객체 감싸기

<a>
    <span>
        <object></object>
    </span>
</a>

<a>태그에 추가 :

display: inline-block;
position: relative; 
z-index: 1;

그리고 <span>태그에 :

display: inline-block;

그리고 <object>태그에 :

position: relative; 
z-index: -1

여기 예를 참조하십시오 : http://dabblet.com/gist/d6ebc6c14bd68a4b06a6

코멘트 20을 통해 발견 https://bugzilla.mozilla.org/show_bug.cgi?id=294932

---

이것을 인정하고 싶지만 여기에서 해결책을 찾았습니다.

https://teamtreehouse.com/forum/how-do-you-make-a-svg-clickable

앵커의 CSS에 다음을 추가하십시오.

a.svg {
  position: relative;
  display: inline-block; 
}
a.svg:after {
  content: ""; 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left:0;
}


<a href="#" class="svg">
  <object data="random.svg" type="image/svg+xml">
    <img src="random.jpg" />
  </object>
</a>

링크는 svg와 폴백에서 작동합니다.

---

SVG의 맨 아래 (닫는 </svg>태그 바로 앞에)에 다음과 같은 것을 넣을 수도 있습니다 .

<a xmlns="http://www.w3.org/2000/svg" id="anchor" xlink:href="/" xmlns:xlink="http://www.w3.org/1999/xlink" target="_top">
    <rect x="0" y="0" width="100%" height="100%" fill-opacity="0"/>
</a>

Then just amend the link to suit. I have used 100% width and height to cover the SVG it sits in. Credit for the technique goes to the smart folks at Clearleft.com - that's where I first saw it used.

---

A simplification of Richard's solution. Works at least in Firefox, Safari and Opera:

<a href="..." style="display: block;">
    <object data="..." style="pointer-events: none;" />
</a>

See http://www.noupe.com/tutorial/svg-clickable-71346.html for additional solutions.

---

To accomplish this in all browsers you need to use a combination of @energee, @Richard and @Feuermurmel methods.

<a href="" style="display: block; z-index: 1;">
    <object data="" style="z-index: -1; pointer-events: none;" />
</a>

Adding:

• pointer-events: none; makes it work in Firefox.
• display: block; gets it working in Chrome, and Safari.
• z-index: 1; z-index: -1; makes it work in IE as well.

---

I resolved this by editing the svg file too.

I wrapped the xml of the whole svg graphic in a group tag that has a click event as follows:

<svg .....>
<g id="thefix" onclick="window.top.location.href='http://www.google.com/';">
 <!-- ... your graphics ... -->
</g>
</svg>

Solution works in all browsers that support object svg script. (default a img tag inside your object element for browsers that don't support svg and you'll cover the gamut of browsers)

---

i tried this clean easy method and seems to work in all browsers. Inside the svg file:

<svg>
<a id="anchor" xlink:href="http://www.google.com" target="_top">
  
<!--your graphic-->
  
</a>
</svg>
  

---

Do it with javascript and add a onClick-attribute to your object-element:

<object data="mysvg.svg" type="image/svg+xml" onClick="window.location.href='http://google.at';">
    <span>Your browser doesn't support SVG images</span>
</object>

참고URL : https://stackoverflow.com/questions/11374059/make-an-html-svg-object-also-a-clickable-link