iOSで動作しないsvg内のリンク

Question

他のdivへのリンクがあるインラインSVGがあります。

デスクトップやアンドロイドの携帯端末では、すべてがうまくいきますが、iPadやiPhoneではうまく動作しません。

リンクをタップすると、リンクであると認識されたように点滅しますが、何も起こりません。

#link { 
 
    margin-top: 1000px; 
 
    height: 100px; 
 
    width: 100px; 
 
    background: red; 
 
    }

<svg id="mapImage" version="1.1" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <clipPath id="p.0"> 
 
    <path d="m0 0l960.0 0l0 720.0l-960.0 0l0 -720.0z" clip-rule="nonzero"></path> 
 
    </clipPath> 
 
    <g clip-path="url(#p.0)"> 
 
    <path fill="#cfe2f3" d="m56.047245 81.91601l143.3386 0l0 129.35434l-143.3386 0z" fill-rule="nonzero"></path> 
 
    <a xlink:href="#link"> 
 
     <path fill="#0000ff" d="m102.396324 123.95276l45.25985 0l0 36.629913l-45.25985 0z" fill-rule="nonzero"></path> 
 
    </a> 
 
    </g> 
 
</svg> 
 

 
<div id="link">Linked div</div>

下記大幅に簡素化

jsfiddle here

またはCSSとHTMLがありますので、私のSVGは非常に非常に長く、その上に15個のアイコンで地図で、あります

SVGに埋め込まれた外部ウェブサイトへのリンクは、通常のHTMLと同様にiOS上で正常に動作します。外部のウェブサイトと他の部門の両方

リンクがiOS上で動作するようにインラインSVGを編集できますか？もしjavascriptが解決されないのであれば？

Answer 1

これは正しい方法かもしれませんが、動作します。

アンカータグからxlink：href = "＃"を削除し、それぞれにidを与え、本当に単純なjqueryを使用して隠れたdivを開きました。

私はこれがどこかでルールを破ると感じていますが、現時点では私が思いつくことができます。その他のアドバイスやご意見は歓迎します。

HTML、CSS、jQueryの以下：

$('#linkTo').click(function() { 
 
    $("#hiddenDiv").toggle(); 
 
    });

 #hiddenDiv { 
 
     display: none; 
 
     height: 100px; 
 
     width: 100px; 
 
     background: red; 
 
    } 
 
    .link { 
 
     cursor: pointer; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg id="mapImage" version="1.1" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <clipPath id="p.0"> 
 
    <path d="m0 0l960.0 0l0 720.0l-960.0 0l0 -720.0z" clip-rule="nonzero"></path> 
 
    </clipPath> 
 
    <g clip-path="url(#p.0)"> 
 
    <path fill="#cfe2f3" d="m56.047245 81.91601l143.3386 0l0 129.35434l-143.3386 0z" fill-rule="nonzero"></path> 
 
    <a id="linkTo" class="link"> 
 
     <path fill="#0000ff" d="m102.396324 123.95276l45.25985 0l0 36.629913l-45.25985 0z" fill-rule="nonzero"></path> 
 
    </a> 
 
    </g> 
 
</svg> 
 

 
<div id="hiddenDiv"> 
 
</div>

jsfiddle here