具有SnapSVG的響應SVG路徑

是否可以有一個響應path使用SnapSVG？具有SnapSVG的響應SVG路徑

我建立了以下 experiment on CodePen，任何我想要我的path響應。

我使用線我的筆9下面的代碼建立我的路徑：

var myPathC = snapC.path("M62.9 14.9c-25-7.74-56.6 4.8-60...

然而，它是這條道路，我希望響應或重新繪製時，瀏覽器窗口調整大小。任何人都知道這是可能的和/或有任何想法如何接近它？

來源

2014-01-06 Matt

給容器一個viewBox屬性，例如

<svg id="svgC" width="100%" height="100%" viewBox="0 0 600 400"></svg>

它會調整窗口的大小。

來源

2014-01-06 15:32:22

我應該看看這個：http://snapsvg.io/docs/#Snap.path.getBBox？我並不是一個真正的JS專家，所以很難理解Snap Documentation。謝謝你的迴應！ – Matt

您可以使用getBBox將轉換應用於路徑。這會導致更復雜的解決方案。 –

可愛，我已經更新了原始問題中的CodePen示例，並且我已經得到了它的工作。 viewBox有點混亂，但我設法完成我所需要的。我會玩viewBox多一點，以更好地理解它，我認爲！ – Matt

我已經創建了一個能夠響應視口建議的工作svg。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 

    <style> 
     .shapeDemo { 
      min-height: 200px; 
      width: 100%; 
     } 

     svg .purpleCircle { 
      fill: darkmagenta; 
      stroke: black; 
      stroke-width:5; 
     } 

     svg .greenRectangle { 
      fill: green; 
      stroke: black; 
      stroke-width: 5; 
     } 

     svg .redRectangle { 
      fill: red; 
      stroke: black; 
      stroke-width: 5; 
     } 
    </style> 
</head> 
<body> 
    <p>Responsive SVG sandbox</p> 
    <svg class="shapeDemo" viewBox="0 0 600 400"> 
     <circle cx="75%" cy="10%" r="2.5%" class="purpleCircle"/> 
     <circle cx="25%" cy="10%" r="1%" class="purpleCircle"/> 
     <circle cx="50%" cy="22%" r="5%" class="purpleCircle"/> 

     <rect x="20%" y="30%" width="10%" height="5%" class="redRectangle" /> 

     <rect x="45%" y="55%" width="10%" height="5%" rx="10" ry="10" 
        class="greenRectangle" /> 

     <ellipse cx="80%" cy="70%" rx="10%" ry="5%" /> 

     <polygon points="100,0 50,50 150,50"/> 
    </svg> 
</body> 
</html>

來源

2014-06-05 17:49:31

具有SnapSVG的響應SVG路徑

回答

相關問題