如何使 SVG 圖像圖案填充隨對象移動？
[英]How to make SVG image pattern fill move with object?
問題描述
我有一些使用fill="url(#background)平鋪圖像背景的 SVG 對象，其中我將#background定義為僅包含image的pattern 。
但是，當對象通過設置其x / y屬性（或cx / cy或任何其他定義偏移量）重新定位時，背景不會隨之移動。
如何使背景也移動？ 從How would I move an SVG pattern with an element我嘗試設置patternContentUnits='objectBoundingBox'但這只是將圖像變成純色 blob（奇怪的是，根據圖像着色，好像它只是第一個像素或類似的）。
這是一個說明所有這些的jsfiddle - 頂部rect已變成純色，然后底部rect具有背景圖像，但它不會隨rect移動：
我知道如果您使用transform="translate(...)"而不是設置x / y屬性，背景也會被翻譯，但我正在使用的現有代碼庫不使用 translate 進行定位（並且它會對應用程序的其余部分產生其他意想不到的后果）。
提前感謝您的幫助。
4 個解決方案
解決方案1
4 2013-10-30 06:11:38
我實際上遇到了同樣的問題並找到了解決方案。 我已經分叉了你的小提琴來展示這些變化。 基本上，您刪除 patternContentUnits 屬性，因為它在這里沒有幫助，並在每次更新后更新圖像的 x 屬性以匹配 rect 對象的屬性。
更新的 HTML：
<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<title>basic pattern</title>
<defs>
<pattern id="pat1" width="179" height="132" patternUnits="userSpaceOnUse">
<image x="0" y="0" width="179" height="132" xlink:href="http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/honey_im_subtle.png"></image>
</pattern>
<pattern id="pat2" width="179" height="132" patternUnits="userSpaceOnUse">
<image x="0" y="0" width="179" height="132" xlink:href="http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/honey_im_subtle.png"></image>
</pattern>
</defs>
<rect id="rect1" x="0" y="0" width="179" height="132" fill="url(#pat1)"/>
<rect id="rect2" x="0" y="150" width="179" height="132" fill="url(#pat2)"/>
</svg>
更新的 JS：
var i = 0;
var newX;
setInterval(
function(){
$('rect').attr('x', Math.sin(i+=.01)*100+100);
$('#pat1').attr('x', $("#rect1").attr('x'));
}, 100);
解決方案2
1 2013-01-18 21:03:24
如果您使用 objectBoundingBox 單位，則寬度為 1（或 100%）是對象的寬度，因此 178 將是該寬度的 178 倍。 你可能想要
<pattern id="pat1" width="179" height="132" patternUnits="userSpaceOnUse" patternContentUnits="objectBoundingBox">
<image width="1" height="1" xlink:href="http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/honey_im_subtle.png"></image>
</pattern>
但這不會使模式移動。 你將需要某種轉換來做到這一點。 如果你不能把它放在<rect>上，也許你可以讓 rect 成為<g>元素的子元素，然后轉換<g>元素。
解決方案3
0 2013-01-19 08:03:17
嘗試將 patternUnits 的值設置為“objectBoundingBox”。
解決方案4
-1 2019-11-28 15:47:25
使用“嵌套 SVG 文檔”對可拖動元素進行分組
模式位置相對於第一個父 SVG 文檔
注意：這可能比其他解決方案性能更差（假設嵌套 svg 文檔很昂貴）
<html>
<!-- svg.js + svg.draggable.js -->
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@latest/dist/svg.min.js"></script>
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.draggable.js@latest/dist/svg.draggable.min.js"></script>
<div id="canvas"></div>
<script type="text/javascript">
// create canvas
var draw = SVG().size(200, 200).addTo('#canvas')
// pattern of checkerboard
var patt = draw.pattern(20, 20)
patt.rect(20, 20).fill({color: '#fff'})
patt.rect(10, 10)
patt.rect(10, 10).move(10, 10)
// nested svg document
var nested = draw.nested()
// rect + pattern
nested.rect(80, 80).attr({
fill: patt
})
// drag on
nested.draggable()
/*
// this works too, but its slow:
// group + draggable
var group = draw.group().draggable()
// move handler
group.on('dragmove', (e) => {
const {x, y} = e.detail.box
patt.move(x, y)
})
// rect with pattern
var r = group.rect(80, 80).attr({
fill: patt
})
*/
</script>
</html>
Fabric.js：用圖像圖案填充SVG
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.