中心切片響應svg圖像調整大小

我一直在嘗試中心切片響應Svg圖像調整大小。中心切片響應svg圖像調整大小

我已經使用preserveAspectRatio="xMidYMax slice"來實現輸出，但圖像寬度不保留寬度我的屏幕。

body{ 
 
    margin:0;padding:0; 
 
} 
 

 
.wrapper { 
 
\t position: relative; 
 
\t width: 100%; 
 
\t min-width: 100%; 
 
\t vertical-align: middle; 
 
\t margin: 0; 
 
} 
 

 

 
.bg-svg { 
 
\t display: inline-block; 
 
\t position: absolute; 
 
\t top: 0; left: 0; 
 
\t width: 100%; 
 
}

<div class="wrapper"> 
 
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d="0px" y="0px" 
 
    width="1920px" height="1080px" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMax slice" class="bg-svg"> 
 
    <rect fill="#DACFB9" width="1920" height="1080"/> 
 
    <rect x="719" y="296" fill="#EF6544" stroke="#FFFFFF" stroke-miterlimit="10" width="482" height="482"/> 
 
    <rect x="1438" y="296" fill="#AFFF84" stroke="#D3D2D2" stroke-miterlimit="10" width="482" height="482"/> 
 
    <rect x="1" y="296" fill="#7AEEFF" stroke="#D3D2D2" stroke-miterlimit="10" width="482" height="482"/> 
 
    <text transform="matrix(1 0 0 1 841 557)" font-family="'GothamBlack'" font-size="60">MIDDLE</text> 
 
    </svg> 
 
</div>

我想實現這樣的Codepen demo輸出，但我不希望使用的背景圖像。

來源

2015-10-27 undefinedtoken

請發表您的相關代碼上SO（如果需要使用一個堆棧溢出快報 - 它的文檔圖標以'<>'在它）。關於你的問題，你所需要做的就是將你的'svg'元素標籤改爲： somethinghere

@somethinghere我試過，但它仍然是一樣的。我希望它能夠響應，並且在調整大小時應該從中心切片。和背景一樣好，並且保持背景位置在兩個軸上的中心位置。 – undefinedtoken

正如你可能已經閱讀我的答案，這是因爲提供的例子是使用SVG作爲背景圖像。如果你保存了你的svg並且用'url（）'來使用它，那麼它就像那樣簡單。 – somethinghere

你的主要問題是，你的SVG需要有：

width="100%" height="100%"

，使其充滿了包裝。還有一些其他不必要的CSS。

body{ 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
.wrapper { 
 
    width: 100%; 
 
    height: 100vh; 
 
}

<div class="wrapper"> 
 
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" 
 
    viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice" class="bg-svg"> 
 
    <rect fill="#DACFB9" width="1920" height="1080"/> 
 
    <rect x="719" y="296" fill="#EF6544" stroke="#FFFFFF" stroke-miterlimit="10" width="482" height="482"/> 
 
    <rect x="1438" y="296" fill="#AFFF84" stroke="#D3D2D2" stroke-miterlimit="10" width="482" height="482"/> 
 
    <rect x="1" y="296" fill="#7AEEFF" stroke="#D3D2D2" stroke-miterlimit="10" width="482" height="482"/> 
 
    <text transform="matrix(1 0 0 1 841 557)" font-family="'GothamBlack'" font-size="60">MIDDLE</text> 
 
    </svg> 
 
</div>

來源

2015-10-27 14:30:23

這就是我一直在尋找的東西。謝謝保羅。 – undefinedtoken

將這些值放在'svg'元素上是有風險的，因爲它打破了正確的大小檢測。不建議。 – somethinghere

我不確定你的意思。使用''100％''就是爲了這個目的而使用的。請注意，瀏覽器將處理'

您試圖實現並已鏈接到的結果使用background-image。爲了使其正確工作，請使用簡化的svg。確保您具有viewBox,xmls和至少一個width或height屬性（設置爲不帶單位的整數）。然後svg將像處理其他背景圖像一樣處理。我不能在這裏顯示出這是我無法從SO鏈接，但繼承人的修訂SVG：如果您保存此

svg { 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    -webkit-transform: translate(-50%,-50%); 
 
    transform: translate(-50%,-50%); 
 
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080"> 
 
    <rect fill="#DACFB9" width="1920" height="1080"/> 
 
    <rect x="719" y="296" fill="#EF6544" stroke="#FFFFFF" stroke-miterlimit="10" width="482" height="482"/> 
 
    <rect x="1438" y="296" fill="#AFFF84" stroke="#D3D2D2" stroke-miterlimit="10" width="482" height="482"/> 
 
    <rect x="1" y="296" fill="#7AEEFF" stroke="#D3D2D2" stroke-miterlimit="10" width="482" height="482"/> 
 
    <text transform="matrix(1 0 0 1 841 557)" font-family="'GothamBlack'" font-size="60">MIDDLE</text> 
 
</svg>

：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080"> 
    <rect fill="#DACFB9" width="1920" height="1080"/> 
    <rect x="719" y="296" fill="#EF6544" stroke="#FFFFFF" stroke-miterlimit="10" width="482" height="482"/> 
    <rect x="1438" y="296" fill="#AFFF84" stroke="#D3D2D2" stroke-miterlimit="10" width="482" height="482"/> 
    <rect x="1" y="296" fill="#7AEEFF" stroke="#D3D2D2" stroke-miterlimit="10" width="482" height="482"/> 
    <text transform="matrix(1 0 0 1 841 557)" font-family="'GothamBlack'" font-size="60">MIDDLE</text> 
</svg>

我們可以模擬這種背景等作爲一個SVG文件，你可以簡單地使用background-image：

background-image: url(path/to/vector.svg) repeat 50% 50%;

來源

2015-10-27 14:19:43 somethinghere

我沒有使用它作爲背景圖片，因爲我想用svg元素觸發幾個javascript動畫，並且轉換不會在Internet Explorer 9上工作。 – undefinedtoken

@undefinedtoken您可以給予或採取此答案，但是您無法擁有您的蛋糕並吃掉它。所提供的例子使用'background-image'，並且因此而運行良好。你可以寫JS來試圖控制所有這些，但就是這樣。 – somethinghere

OP想要用JS操縱SVG。如果SVG作爲來自'background-image'的外部圖像鏈接，他將無法做到這一點。 –

中心切片響應svg圖像調整大小

回答

相關問題