svgの行の位置をどのように応答させるか

Question

私は真ん中に少し余白を入れてテキストとイメージを並べています。画像上の特定の点に矢印を描きたい。

しかし、私はsvgを使用しようとしていますが、行の位置は何とか反応しません。ここにいくつかの質問（thisのような）とブログの投稿（thisのような）を読んだ後、私は%にすべての値を変更し、またviewBox属性を追加しましたが、何らかの理由で矢印が現在のブラウザ画面1920x1200で正しい位置にのみあります。ブラウザウィンドウのサイズを変更すると、矢印の位置が正しくありません。私のコード：

HTML：

<div id="a"> 
This is the nose 
</div><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 2000 2000" preserveAspectRatio="none"> 
    <line x1="9%" y1="9.5%" x2="23%" y2="6%" marker-end="url(#triangle)" stroke="black" stroke-width="0.2%"/> 

</svg> 
<img src="http://www.hickerphoto.com/images/200/little-polar-bear_29287.jpg" /> 

CSS：

#a{ 
position: absolute; 
margin-top: 8%; 

} 
svg{ 
    position: absolute; 
    z-index:2; 

} 
img{ 
    margin-left: 20%; 
    position:relative; 
    z-index:1; 
} 

ここfiddle

誰もが、これは機能しない理由のアイデアですか？

ここでもsvgは正しい試みですか、それとも別のものを使うべきですか？

Answer 1

SVG viewBox
Making SVGs Responsive with CSS - Tympanus
SVG text and Small, Scalable, Accessible Typographic Designs
SVG image element

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 2000 2000" preserveAspectRatio="none"> 
 
    <image x="20" y="20" width="132" height="200" xlink:href="http://www.hickerphoto.com/images/200/little-polar-bear_29287.jpg" /> 
 
    <text x="25" y="55" font-family="'Lucida Grande', sans-serif" font-size="32">This is the nose </text> 
 
    <line x1="9%" y1="9.5%" x2="23%" y2="6%" marker-end="url(#triangle)" stroke="black" stroke-width="0.2%"/> 
 
</svg>

Answer 2

私は1つの解決策を見つけましたが、これが良いものかどうかはわかりません。私を修正してください。

まず、viewBox属性を削除しました。それから私はイメージに相対的な幅とheight: auto;を与えることによっても反応しました。最後にCSSでフォントサイズを反応させました。

body{ 
font-size: 12pt; 
} 
a{ 
font-size: 1.5vh; 
} 

ブラウザのサイズを変更したときに機能します。ここではfiddleです。私が間違っているなら、私を修正してください。