縮放svg設置寬度（像素）及自動高度

我似乎不明白svg。我希望有人向我解釋我錯在哪裏。所以我有一個內聯svg：縮放svg設置寬度（像素）及自動高度

<div style="width:1000px; height:auto; background-color:blue;"> 
    <svg class="_image"><use xlink:href="#myId" /> 
     <symbol id="myId" viewBox="0 0 1000 700"> 
     <ellipse cx="200" cy="80" rx="100" ry="50" 
      style="fill:yellow;stroke:purple;stroke-width:2" /> 
     </symbol> 
    </svg> 
    </div>

div的寬度設置爲1000px。 svg設置爲100％寬度。它有一個viewBox。我現在希望svg的寬度爲100％，這意味着寬度爲1000px，然後相應地調整高度，因爲它被設置爲自動爲div和svg本身。我期待這一點，因爲我提供了一個viewbox。我哪裏錯了？

這裏是CSS：

._image { 
    width: 100%; 
    height: auto; 
}

...一切放在一起作爲一個小提琴：https://jsfiddle.net/hv6ejn98/2/

來源

2017-06-22 George Welder

https://css-tricks.com/scale-svg/ – CBroe

感謝。我已經看過這個教程（還有很多其他教程），他們都告訴我我需要一個viewbox，然後它適當地擴展。這似乎並不適用於我，所以我必須錯過一些東西。這就是爲什麼我創建了這個最簡單的例子，實際上並不多。所以，如果你可以更具體一點，那將不勝感激。 –

您的svg寬度爲100％，即1000px。你的情況中的橢圓不是。嘗試把一個SVG圖像。它會像預期的那樣擴展。然後你可以調試它。 –

SVG的設置爲100％的寬度。它有一個viewBox。

不，它不。只有你的<symbol>。沒有viewBox你的SVG不會縮放。如果您將一個viewBox添加到SVG，則所有內容都可以按照您的預期運行。

<div style="width:1000px; height:auto; background-color:blue;"> 
 
    <svg class="_image" viewBox="0 0 1000 700"><use xlink:href="#myId" /> 
 
     <symbol id="myId" viewBox="0 0 1000 700"> 
 
     <ellipse cx="200" cy="80" rx="100" ry="50" 
 
      style="fill:yellow;stroke:purple;stroke-width:2" /> 
 
     </symbol> 
 
    </svg> 
 
    </div>

來源

2017-06-22 13:22:19

好的，謝謝，那太棒了。我使用的符號，但是，因爲我在一個精靈文件中使用它。這意味着我不能給svg一個viewBox - 因爲它包含了我的整個項目的所有圖像。請參閱https：// css-tricks。 com/svg-sprites-use-better-icon-fonts /並且在這裏https://css-tricks.com/svg-symbol-good-choice-icons/。這個案例的任何建議？ –

取決於你的意思是「 sprite file「。如果你的意思是替換一個位圖精靈文件，那麼只需將你的SVG寬度和高度設置爲與viewBox匹配即：'width =」1000「height =」700「viewBox =」0 0 1000 700「' 。如果你的意思是「從另一個文件訪問的符號的集合」，那麼viewBox需要進入另一個文件中，無論如何這個文件中的文件將被忽略。 –

縮放svg設置寬度（像素）及自動高度

回答

相關問題