SVG中與尺度無關的重複背景圖像

我有一個問題，我希望有人能幫助我。我所搜索的內容與SVG圖像中的CSS屬性background-repeat相當。是否有任何黑客可以實現重複的光柵圖像作爲填充？關鍵是我正在設計一個網站，並且想要對SVG圖形進行試驗以使其具有可擴展性。所以當用戶放大一切時保持清晰。但是，我也需要「粒狀」柵格紋理。現在，如果我在Illustrator中將光柵圖像作爲紋理應用並將其另存爲SVG，則紋理會隨着文件一起縮放，而細微的紋理會變成難看的像素塊。現在我正在尋找重複圖像的可能性，而不是在縮放時縮放圖像。有沒有人知道一個黑客來實現這一目標？SVG中與尺度無關的重複背景圖像

我想過的另一種可能性是將光柵圖像從SVG中取出並通過CSS應用爲背景。不幸的是，似乎沒有辦法阻止背景圖像通過CSS或JavaScript縮放。這是非常有道理的，因爲任何人在內容元素上這樣做肯定會進入可訪問性地獄。

來源

2012-01-19 Pascal

請參閱SVG Patterns。我相信你可以使用patternUnits和patternContentUnits來實現你的縮放獨立行爲，但還沒有證實這一點。

來源

2012-01-19 20:14:51 Phrogz

我能夠通過使用ems中設置的背景大小值而不是百分比來完成此項工作。我創建了更大尺寸（30px x 90px）的SVG，並使用ems將其縮小到我的目標大小。

body { 
    font-size: 15px; 
    background: #fff url(stripe_pattern.svg) repeat-x left top; 
    -webkit-background-size: 0.5em, 0.5em; 
    -moz-background-size: 0.5em, 0.5em; 
    -o-background-size: 0.5em, 0.5em; 
    background-size: 0.5em, 0.5em; 
}

這至少適用於現代瀏覽器。 IE可以回退光柵版本。

來源

2012-01-20 06:10:52 atparkweb

SVG中與尺度無關的重複背景圖像

回答

相關問題