我正在使用 SVG <pattern>
将 <image>
填充到另一个用户提供的 SVG 上,但我真的很讨厌它自动重复的方式(我明白了)我需要知道是否有办法或黑客让它停止重复图片,因为它导致了两个问题。
当浏览器认为它必须开始绘制多个图像(平铺)时,它会明显卡顿(我认为这也是 Interact.js 性能不佳的部分原因)
用户不希望它平铺,只是它周围的空白空间。
它在 Electron 应用程序中,因此浏览器支持最少。
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>
该模式在另一个单独的 SVG 中用作路径上的 fill
属性。
这是一个 Codepen,它以与我使用它相同的方式显示图像平铺(更少的变换)
最佳答案
没有等效于 CSS no-repeat
用于 SVG 模式。防止图像图案重复的唯一方法是使图案拼贴(由 width
、 height
、 x
和 y
在 <pattern>
元素上定义)大于它填充的形状。
由于您使用的是 fill
(不是 stroke
)和默认的 objectBoundingBox
patternUnits
的值, 这通常可以保证宽度/高度为 1(必须明确设置)和 x/y 为 0(默认值)。但是,您正在使用的转换会取消它。
在不知道您如何或为何按照您的方式计算转换的情况下,我无法告诉您用于创建足够大的图案拼贴的逆向计算。
相反,我建议您不要管模式转换,而是转换 <image>
反而。 pattern transform 属性很有用,因为它会转换平铺模式和内容,但由于您不希望任何平铺可见,因此在这种情况下这是不必要的复杂化。
关于javascript - SVG 模式,任何方式/黑客停止重复图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33474755/