Canvas SVG剪辑路径大小调整问题
我在Safari/Chrome中使用了.png掩码，而Firefox不支持使用.pngs进行掩码，因此我将使用剪辑路径svg来塑造画布。可以查看演示 调整窗口大小时，.png掩码的行为与预期一致，但是svg剪辑路径没有。调整窗口大小后，剪辑路径将保留其原始坐标，而不会使用其DIV进行缩放，即使画布正在缩放 有谁能帮我解决这个问题，因为我已经花了相当长的时间尝试让这个响应性强的功能正常工作，但没有成功 我的项目演示标记是： 身体{ 保证金：0自动； 文本对齐：左对齐； 宽度：100%； 身高：100%； 职位：继承； 背景位置：中上； 背景重复：无重复； 背景色：F5； 溢出：自动； 列表样式类型：无； 字体系列：“Exo”，无衬线； 字体风格：普通； 字号：700； 字体大小：10px； } 哈皮塞尔{ 位置：静态； 显示：块； 宽度：自动； 最大高度：992px； 文本对齐：居中； 保证金：0自动； 背景图片：url../images/happycell_flask.png； 背景重复：无重复； 背景位置：继承； 背景尺寸：包含； } happycell img{ 最大宽度：100%； 位置：绝对位置； } .实验{ 位置：相对位置； 显示：内联块； 排名：0； 文本对齐：居中； 保证金：0自动； -webkit掩码图像：url../images/happycell_mask.png； -o-mask-image:url../images/happycell_mask.png； -moz mask image:url../images/happycell_mask.png； 掩码图像：url../images/happycell_mask.png； -webkit掩码重复：无重复； -webkit面罩尺寸：100%； 剪辑路径：url../images/clip.svgsvgClip； } c{ 职位：继承； 身高：100%； 宽度：100%； 不透明度：1； } c img{ 宽度：100%； 身高：100%； }Canvas SVG剪辑路径大小调整问题,canvas,svg,clip,Canvas,Svg,Clip,我在Safari/Chrome中使用了.png掩码，而Firefox不支持使用.pngs进行掩码，因此我将使用剪辑路径svg来塑造画布。可以查看演示 调整窗口大小时，.png掩码的行为与预期一致，但是svg剪辑路径没有。调整窗口大小后，剪辑路径将保留其原始坐标，而不会使用其DIV进行缩放，即使画布正在缩放 有谁能帮我解决这个问题，因为我已经花了相当长的时间尝试让这个响应性强的功能正常工作，但没有成功 我的项目演示标记是： 身体{ 保证金：0自动； 文本对齐：左对齐； 宽度：100%； 身高：1
您发布的代码不完整且不准确。请发布您试图剪辑的HTML/CSS代码和您正在使用的SVG剪辑路径。我怀疑如果您使用objectBoundingBox单位而不是userSpaceOnUse单位，情况会更好。谢谢，我已使用clipPathUnits=objectBoundingBox更新了剪辑路径，但画布内容现在没有呈现。相对于剪辑路径单位，objectBoundingBox中引用的对象是否为包含遮罩的DIV？如果不更改内容，则无法从一个单位系统更改为另一个单位系统。你所做的就像是从米到英寸的转换，而没有将所有的值转换成新的单位制，所以现在所有的东西都是错误的大小。path d属性中的所有值都需要更改，以适合新的单位制，该单位制现在基本上为0..1非常感谢您的帮助。我已经将路径更改为标准几何形状，剪辑路径缩放现在可以完美工作。我的原始SVG片段路径是使用Adobe Illustrator创建的，因此我的下一个挑战将是使用objectBoundingBox的可接受坐标重新创建该片段路径形状。