爲SVG模式防止拉伸/保留橫向比率

我有一個svg路徑，我想要應用模式。但是，該模式似乎橫向延伸，我認爲我可能會錯誤地應用它。有沒有辦法確保svg填充模式像保持背景一樣保持其比例？我的代碼在下面，並且下面的jsFiddle類似於稍微不同的設置。我想要應用的圖案是500x500像素。爲SVG模式防止拉伸/保留橫向比率

<svg version="1.1" 
baseProfile="full" 
xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" 
xmlns:ev="http://www.w3.org/2001/xml-events" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"> 
<title>Text Pattern Fill Example</title> 
<defs> 
    <pattern id="img1" patternUnits="userSpaceOnUse" width="500" height="500"> 
     <image xlink:href="img/textures/blogCont/white_wall_hash/white_wall_hash.png" x="0" y="0" 
      width="500" height="500" /> 
    </pattern> 
</defs> 
<path d="M0 0 C 50 100 80 100 100 0 Z" fill="url(#img1)" />

這裏是a jsfiddle

一個鏈接，我想結合this pattern和曲線效應有關下來this svg page.

感謝方式的1/3！

來源

2014-02-12 user1574832

它伸展，因爲你是整個SVG伸展到寬度（但不改變高度）。現在真的沒有辦法打這個了。如果SVG未以1：1呈現，則所有內容都會以某種方式展開。

您唯一的選擇是將x和y中的SVG縮放相同的量。

http://jsfiddle.net/RKLec/1/

或者，用戶一種變通方法，如分層在HTML兩個元素。例如。將圖像作爲背景放在一個<div>中，並將SVG放在另一圖層中並重疊它們，以便SVG「掩蓋」該圖案。

來源

2014-02-12 16:34:04

感謝您的幫助！我開始認爲這可能不值得。如果我正確理解它，第二個建議的問題是設置不會在瀏覽器調整大小時擴展......它只是一個固定的圖像？似乎沒有任何好的選項 – user1574832

否SVG曲線可以隨頁面一起縮放，只要它沒有圖案。你把它變成你想要的「消極」，並用它作爲面具。演示：http://jsfiddle.net/RKLec/2/ –

感謝BigBadaboom！這似乎是完美的。我現在唯一的問題是如何有效地將演示中的填充從「綠色」更改爲其他圖像。例如，下一節有一個紋理背景圖像。我能夠設置fill =「url（#img）」，其中#img是一個模式，如下所示。但比例似乎有所拉伸。 \t <模式ID = 「IMG1」 patternUnits = 「userSpaceOnUse」 WIDTH = 「100」 HEIGHT = 「100」> \t <圖像的xlink：HREF = 「IMG /紋理/體/ low_contrast_linen/low_contrast_linen.png」 ×=」 0「y =」0「width =」256「height =」256「/> \t \t – user1574832

爲SVG模式防止拉伸/保留橫向比率

回答

相關問題