在SVG中有相對點的路徑

我試圖產生的代碼相同的：當我縮放#svg-container

<div id="svg-container"> 
    <svg width='100%' height='100%' viewBox="0 0 100 100" preserveAspectRatio="none" style='background-color: yellow'> 

    <path 
     style="fill:none;stroke:blue;stroke-width:5;" 
     d="M0% 10% L50% 10% L50% 90% L100% 90%"   <-here is the problem 
    /> 

    </svg> 
</div>

所以我會得到：

enter image description here

但因爲我不能創建％的路徑座標我能做的最好的是：（JSFiddle)

<div id="svg-container"> 
    <svg width='100%' height='100%' viewBox="0 0 100 100" preserveAspectRatio="none" style='background-color: yellow'> 

    <path 
     style="fill:none;stroke:blue;stroke-width:5;" 
     d="M0 10 L50 10 L50 90 L100 90"    
    /> 

    </svg> 
</div>

這給了我這樣的結果：

enter image description here

上，您可以看到問題拉伸stroke-width第二張照片。

我的問題是：如何實現像第一張照片一樣的行爲？

我不是在尋找JavaScript的答案和打破路徑。

來源

2014-11-23 Everettss

好像你想要的vector-effect風格：不結垢衝程

請注意，並非所有的UA實現這一點，但Chrome和Firefox肯定做。

來源

2014-11-23 16:39:10

是的！有用。只需要一行代碼就可以修復它：http://jsfiddle.net/2fp9tLzm/ 你現在是否支持IE11呢？ – Everettss 2014-11-23 17:07:19

IE11不支持矢量效果 – 2014-11-23 17:17:59

我很抱歉地說，我認爲你只能用JavaScript來做到這一點，即使這不是你正在尋找的答案。發生的事情是，您首先生成SVG路徑，然後再調整大小，以便圖像變得拉伸。例如，要使用JavaScript，您可以使用（browser.width/100）* 10獲得10％，並且這適用於所有尺寸的瀏覽器屏幕。

你如何重新縮放圖像（即它是一個CSS @media查詢）？重新縮放之後可能會繪製路徑，但我覺得這將需要JS，因爲在瀏覽器加載後需要加載內容。

不好意思的回答你提出的問題，但除非有其他的選擇，否則我認爲這是你做這件事的唯一方法。

來源

2014-11-23 16:17:47

在SVG中有相對點的路徑

回答

相關問題