<a> svg의 하이퍼 링크 <use>

EDIT : Firefox가 이것을 지원하는 유일한 브라우저 인 것 같습니다. Chrome 용 솔루션을 찾고있는 입니다.<a> svg의 하이퍼 링크 <use>

나는 웹 사이트의 여러 페이지에 반복하는 SVG 헤더가 노력하고있어, 나는 <use>와 그것을 달성 할 수 있지만, 문제는 SVG에서 하이퍼 링크 (즉 로고가) 응답하지 않는다는 것입니다 클릭 이벤트.

다음은 문제를 보여주는 단순화 된 스 니펫입니다. 인라인 하이퍼 링크가있는 왼쪽 상자는 제대로 작동하지만 <use> 태그를 통해 포함 된 경우 올바른 상자에서 볼 수 있듯이 클릭에 응답하지 않습니다.

<svg width="300" height="100"> 
 
    <svg id="link"> 
 
    <a href="https://google.com"> 
 
     <rect width="100" height="100" /> 
 
    </a> 
 
    </svg> 
 
    <use x="200" xlink:href="#link"></use> 
 
</svg>

그것은 또한 여기에서 사용할 수 : SVG는 XML 기반의 HTML 사용을 기반으로하고 있지 않기 때문에 https://jsfiddle.net/sh8276gu는

출처

2017-02-01 MSbitani

UA/브라우저에서 테스트 중이십니까? –

나는 Chrome 55, Edge 40 및 IE 11에서 Win10뿐만 아니라 Android 7.1.1에서 Chrome 55를 테스트했습니다. @ RobertLongson – MSbitani

Firefox 51에서 정상적으로 작동하는 것을 볼 수 있습니다. 지금 일어나지 않고있는 일이 일어날 것으로 예상되는 것을보다 명확하게 설명하십시오. –

, 당신이 사용하는 링크를 포함 할 필요가 대신 일반 HTML <a> 태그를 사용할 수 없습니다 Xlink.

이것은 <use> 태그 내에 적용한 것과 동일한 유형의 연결 방법입니다. 다음과 같을 것 인 XLink를 사용하는 포맷 코드 :

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="300" height="100"> 
    <svg id="link"> 
    <a xlink:href="https://google.com"> 
     <rect width="100" height="100" /> 
    </a> 
    </svg> 
    <use x="200" xlink:href="#link"></use> 
</svg>

당신은 SVG here의 링크를 포함에 대한 자세한 내용을보실 수 있습니다.

출처

2017-02-01 05:25:43

OP 코드는 Firefox 51에서 작동하지만 다른 곳에서는 테스트하지 않았습니다. 아마도 그는 아직 href를 지원하지 않는 UA (또는 href에 버그가 있음)를 지원하고있을 것입니다. –

이것은 [MDN] (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href)에 따라 사용하기를 권장하지 않는 구식 표준입니다. 호기심에서 어쨌든 시도해 보았지만 여전히 효과가 없습니다. 너에게 효과가 있었 니? – MSbitani

MDN은 오히려 최첨단입니다. xlink : 사파리에서는 href가 여전히 필요합니다. 사용하기를 권장하며, MDN이 있어야 할 위치보다 조금 앞선 것이 좋습니다. –

<a> svg의 하이퍼 링크 <use>

답변

관련 문제