如何在svg響應中製作線條的位置

我有一個文字和圖像並排放置，中間留有一點空白。我想繪製一個箭頭到圖像上的特定點。如何在svg響應中製作線條的位置

因此，我試圖使用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在這裏甚至是正確的嘗試還是應該使用別的東西？

來源

2016-09-16 Tom

能否請您解釋一下下降投票？ – Tom

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>

來源

2016-09-17 08:07:17

所以這意味着它只適用於我在SVG中「繪製」所有內容？沒有其他辦法了？ – Tom

我認爲這是最簡單的方法。在Adobe Illustrator中繪製所有內容，然後導出爲'SVG'文件。我使用這個工作流程製作了一些SVG項目，即多邊形風格的城市景觀：http://codepen.io/smalinux/pen/yJwJjm/left/。我的SVG工作流程：https：//www.youtube.com/watch？v = 06atTvwkuJE –

我找到了一個解決方案，不知道這是否是一個好的解決方案，請糾正我。

首先我刪除了viewBox屬性。然後，我通過給它一個相對寬度和height: auto;也使圖像響應。最後，我還通過由字體大小在CSS響應：

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

作品時，我調整瀏覽器。這裏fiddle。如果我錯了，請糾正我。

來源

2016-09-16 22:29:59 Tom

如何在svg響應中製作線條的位置

回答

相關問題