在手機上調整SVG大小

如何調整我的SVG徽標以便在移動設備上進行響應？在手機上調整SVG大小

這裏是我的Fiddle和我的代碼如下：

body { 
 
    background:black; 
 
} 
 

 
@media screen and (max-width: 500px) { 
 
    svg { 
 
     width:50%; 
 
    } 
 
}

<?xml version="1.0" encoding="UTF-8" standalone="no" ?> 
 
<svg version="1.1" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> 
 
    <title>Logo</title> 
 
    <desc>Created with Sketch.</desc> 
 
    <defs></defs> 
 
    <g id="Your-Score" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> 
 
    <g id="Desktop-Your-Score" sketch:type="MSLayerGroup" transform="translate(-23.000000, -24.000000)" font-weight="normal" font-family="Gill Sans" letter-spacing="1.16666663" font-size="28" sketch:alignment="middle" fill="#FFFFFF"> 
 
     <g id="Header" sketch:type="MSTextLayer"> 
 
     <g id="Primary-Nav-[home]-Copy"> 
 
      <g id="Logo" transform="translate(23.000000, 18.000000)"> 
 
      <text id="TOMORROW’S"> 
 
       <tspan x="0.0328778028" y="27">TOMORROW’S</tspan> 
 
       <tspan x="36.2975262" y="58">SCORE</tspan> 
 
      </text> 
 
      </g> 
 
     </g> 
 
     </g> 
 
    </g> 
 
    </g> 
 
</svg>

來源

2015-11-19 michaelmcgurk

對於通過img元素的縮放工作，SVG圖像需要具有它的寬度，高度和視框屬性設置在其內部。下面是它的外觀：

<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="70px" height="70px" viewBox="0 0 70 70"> 
    <circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/> 
</svg>

當設置width，height和viewBox屬性時，您告訴瀏覽器繪製虛擬畫布的哪個部分。該視圖框指示虛擬畫布的左上角和右下角。因此，如果圖像縮放到比這更大的尺寸，則整個圖像將被放大，而不僅僅是使虛擬畫布更大（導致圖像中SVG形狀旁邊的空白）。

我的教程中關於SVG視口和視圖框的更詳細介紹了viewBox屬性。

始終設置圖像寬度通過CSS屬性

在我在本教程中，你的所有例子中，所有的圖像寬度已經通過CSS width屬性設置。不要使用img元素的寬度和高度屬性。它不會產生預期的效果。瀏覽器對待這些屬性的方式與對應的CSS屬性不同。

更準確地說，這是正確的做法：

<img src="/svg/circle-element-1.jsp" style="width: 32px;">

來源

2015-11-19 07:50:26 Justinjs

完美！這裏更新：http://jsfiddle.net/3e4fk3u5/2/ :-) – michaelmcgurk

請注意，在HTML中，你實際上不需要添加'xmlns'規範... – Shikkediel

使用您的SVG內的<img>標籤，例如：

<img src="my_SVG_file.svg" alt="" />

然後你可以使用標準CSS影響<img>標籤&使其移動響應我有。

img { 
    max-width: 100%; 
}

CODEPEN DEMO

來源

2015-11-19 07:47:50

加載從''標籤中的SVG將禁用此SVG的所有腳本或外部CSS樣式。 Op的代碼似乎沒有任何像現在這樣的內容，但通常需要將內聯svg保存爲內聯svg ... – Kaiido

絕對正確！感謝您添加該信息。 –

這似乎沒有爲我調整大小。是否有可能在我的CSS中的某個中斷點調整它的大小？ – michaelmcgurk

在手機上調整SVG大小

回答

相關問題