SVG模式，任何方式/破解停止重複圖像

我正在使用SVG <pattern>使一個<image>填充另一個用戶提供的SVG，但我真的討厭它是如何自動重複（我明白了）我需要知道如果有一種方法或黑客可以停止重複圖像，因爲它會導致兩個問題。SVG模式，任何方式/破解停止重複圖像

當瀏覽器認爲它必須開始畫圖像（拼接）的多個它明顯janks（我想這也是部分Interact.js表現不佳）
用戶不要不想讓它平鋪，只是它周圍的空白空間。

它在一個電子應用程序，所以瀏覽器的支持是最小的。

process.versions = { 
    ares: "1.10.1-DEV" 
    atom-shell: "0.34.1" 
    chrome: "45.0.2454.85" 
    electron: "0.34.1" 
    http_parser: "2.5.0" 
    modules: "46" 
    node: "4.1.1" 
    openssl: "1.0.2d" 
    uv: "1.7.4" 
    v8: "4.5.103.29" 
    zlib: "1.2.8" 
}

這是根據要求（與通常應用的變換）的模式，雖然但我不知道這是什麼使用。

<pattern>的width和height通過(target element's dimensions/image's size) + 1計算。 data-x/y用作拖放界面的一部分，data-scale-x/y用於縮放圖像而不翻譯它。

<pattern id="user_image_container" patternUnits="objectBoundingBox" x="0" y="0" width="16.125264252110085" height="11.416432536797034" data-x="-3008" data-y="-1525" patternTransform="rotate(0 -416 203) translate(170.510014198065 170.5174437535593) scale(0.070795135733522) translate(-3008 -1525)" data-scale-x="170.510014198065" data-scale-y="170.5174437535593"> 
    <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/Users/username/Desktop/IMG_8829 2.JPG" id="user_image" width="5184" height="3456"></image> 
</pattern>

圖案被用作路徑上的fill屬性在另一個單獨的SVG。

這裏是一個Codepen，顯示以同樣的方式將圖像平鋪我使用它（較少變換）

http://codepen.io/davemackintosh/pen/zvLvey

來源

2015-11-02 Dave Mackintosh

相關SO：http://stackoverflow.com/questions/20819153/why-background-repeat-no-repeat-doesnt-work-with-svg-images-in- opera-12 –

它實際上是一個電子應用程序，技術上它是Chrome。@Tomer添加了輸出到問題的版本。 –

向我們展示您的SVG - 包括模式。 –

沒有等同於CSS no-repeat爲SVG圖形。防止圖像圖案重複的唯一方法是使圖案拼貼（由width,height,x和y在<pattern>元素上定義）大於其填充的形狀。

由於您使用fill（不stroke）和patternUnits默認objectBoundingBox值，這通常是爲1的寬度/高度保證（一定要明確設置）和0（默認值）的X/Y 。然而，你正在使用的轉換將會拋棄。

不知道如何或爲什麼要按照您的方式計算轉換，我無法告訴您使用反向計算來創建足夠大的圖案拼貼。相反，我建議你不要單獨進行模式轉換，而應改爲改變<image>。模式轉換屬性很有用，因爲它可以轉換平鋪模式以及內容，但是由於您不希望任何平鋪可見，所以在這種情況下是不必要的複雜化。

來源

2015-11-02 16:09:54 AmeliaBR

P.S .:通過'patternContentUnits =「objectBoundingBox」''，在''上找出正確的變換（假設你試圖將它放在圖案拼貼中並保持一個固定的大小）。或者，如果你願意犧牲對較老的Firefox的支持，[改用'viewBox'（http://stackoverflow.com/a/22886596/3128209）。 – AmeliaBR

有趣的是，我發誓我試過這個，因爲它看起來很明顯。 *落在* –

我知道這已經2年了，但我一直在尋找相同的解決方案。我試過這個帖子，它的工作原理 - Fill SVG path element with a background image without tiling or scaling

來源

2017-12-27 06:00:50 Pluto

這是我的解決方案。完美工作。所有其他答案都有重複或抵消的問題。 –

SVG模式，任何方式/破解停止重複圖像

回答

相關問題