我正在使用SVG<模式>制作一个< 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>的宽度和高度由(目标元素的尺寸/图像尺寸)计算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中路径的填充属性.
这是一个Codepen,它以与我使用它相同的方式显示图像平铺(较少的转换)
http://codepen.io/davemackintosh/pen/zvLvey
解决方法:
对于SVG模式,没有等效的CSS无重复.防止图像图案重复的唯一方法是使图案图块(由< pattern>元素上的宽度,高度,x和y定义)大于其填充的形状.
由于您正在使用fill(而不是笔划)和patternUnits的默认objectBoundingBox值,因此通常可以确保宽度/高度为1(必须明确设置)和x / y为0(默认值).但是,您正在使用的转换会将其抛弃.
在不知道你是如何或为什么以你的方式计算变换的情况下,我无法告诉你用于创建足够大的图案拼贴的反向计算.
相反,我建议您单独保留模式转换,并转换< image>代替.模式转换属性很有用,因为它可以转换平铺模式以及内容,但由于您不希望任何平铺可见,因此在这种情况下这是不必要的复杂化.
原文地址:https://codeday.me/bug/20190528/1168671.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。