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>

그런 다음 링크를 수정하십시오. 저는 SVG를 덮기 위해 너비와 높이를 100 % 사용했습니다.이 기술에 대한 크레딧은 Clearleft.com의 똑똑한 사람들에게 전달됩니다.

Richard의 솔루션 단순화. 최소한 Firefox, Safari 및 Opera에서 작동합니다.

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

추가 솔루션 은 http://www.noupe.com/tutorial/svg-clickable-71346.html 을 참조 하십시오 .

모든 브라우저에서이를 수행하려면 @energee, @Richard 및 @Feuermurmel 방법을 조합하여 사용해야합니다.

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

첨가:

• pointer-events: none; Firefox에서 작동합니다.
• display: block; Chrome과 Safari에서 작동합니다.
• z-index: 1; z-index: -1; IE에서도 작동합니다.

svg 파일을 편집 하여이 문제를 해결했습니다.

다음과 같이 click 이벤트가있는 그룹 태그에 전체 svg 그래픽의 XML을 래핑했습니다.

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

솔루션은 객체 svg 스크립트를 지원하는 모든 브라우저에서 작동합니다. (기본적으로 svg를 지원하지 않는 브라우저의 객체 요소 안에 img 태그가 있으며 브라우저의 범위를 다룰 것입니다)

이 깨끗하고 쉬운 방법을 시도했지만 모든 브라우저에서 작동하는 것 같습니다. svg 파일 내부 :

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

그냥 사용하지 마십시오 <object>. 다음은 나를 위해 일한 솔루션 <a>과 <svg>태그입니다.

<a href="<your-link>" class="mr-5 p-1 border-2 border-transparent text-gray-400 rounded-full hover:text-white focus:outline-none focus:text-white focus:bg-red-700 transition duration-150 ease-in-out" aria-label="Notifications">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="30" 
    height="30"><path class="heroicon-ui" fill="#fff" d="M17 16a3 3 0 1 1-2.83 
    2H9.83a3 3 0 1 1-5.62-.1A3 3 0 0 1 5 12V4H3a1 1 0 1 1 0-2h3a1 1 0 0 1 1 
    1v1h14a1 1 0 0 1 .9 1.45l-4 8a1 1 0 0 1-.9.55H5a1 1 0 0 0 0 2h12zM7 12h9.38l3- 
   6H7v6zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm10 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
    </svg>
</a>

자바 스크립트로 수행하고- 요소에- onClick속성을 추가 하십시오 object.

<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>