将 clipPath 应用到带有变换的 Image 元素时出现问题

Posted

技术标签:

【中文标题】将 clipPath 应用到带有变换的 Image 元素时出现问题【英文标题】:Problems applying a clipPath to an Image element with transform 【发布时间】:2013-11-05 00:40:56 【问题描述】:

对于我的生活,我无法弄清楚为什么 SVG 不会呈现以下图形:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"   viewBox="0 0 623316 347091">
<clipPath id="randompath">
            <path d="M 6096 82296 C 6096 40211.90206289354 48740.87757861691 6096 101345.99999999999 6095.999999999988 153951.12242138304 6095.999999999977 196596.00000000003 40211.9020628935 196596.00000000003 82295.99999999996 196596.00000000003 124380.09793710642 153951.1224213831 158495.99999999997 101346.00000000001 158495.99999999997 48740.87757861695 158495.99999999997 6096.000000000012 124380.09793710642 6096 82295.99999999997 Z"/>
</clipPath>
<image x="0" y="0"   xlink:href="http://www.cutepandapictures.com/wp-content/uploads/2012/07/babypandahugsatree.jpg" transform="matrix(381,0,0,381,6096,6096)" clip-path="url(#randompath)"/>
</svg>

我发现了以下两件事:

当剪辑路径为基本圆形时,图像会被正确剪辑。 未设置剪辑路径时,图像可以正确呈现。

功能失调代码的演示可用here。

编辑:clipPath 内的路径会自行正确呈现。我怀疑它不会渲染,因为根据this,clip-Path 是相对于被剪切的图像而不是视图框渲染的。

【问题讨论】:

【参考方案1】:

SVG!=CSS。在 SVG 中设置视图框单位后,这些单位通常会覆盖文档其余部分中指定的任何单位(例如 &lt;image&gt; 中的那些“px”)。 SVG 正在读取“500px”的值和 500 个 ViewBox 单位(在您的情况下是像素的 1/600(1636/623316),然后应用指定的变换将其缩放 381 倍并将其移动 6096 个视图框单位(又名大约 10 像素)在 x 和 y 中。

但您真正的问题是 clipPath 单元继承了该转换(例如,这些剪辑单元被解释为 (623,316 x 381) 宽度容器中的单元!!)

如果您使用 viewbox 单位重做图像尺寸,并摆脱变换一切正常。以下只是粗略的估计,你需要拿出你的计算器才能得到真正的结果——但它说明了这一点。

<image x="0" y="0"   
  xlink:href="http://www.cutepandapictures.com/wp-
  content/uploads/2012/07/babypandahugsatree.jpg"  clip-path="url(#randompath)"/>

或者,将所有剪辑路径值除以 500'ish,您会看到一个开始有意义的结果。这是一个剪辑路径编号除以 1,000 的示例(只需移动小数点很容易):http://jsfiddle.net/reU7t/

【讨论】:

如何在单位之间进行转换,尤其是因为像素没有定义范围(即理论上像素从 0 到无穷大)? 很遗憾,在转换像素值后,仍然无法正确渲染。 迈克尔是对的。您的 clipPath 是在您将图像转换到的坐标系中定义的。但它也将变换应用到它,所以它最终变得太大了 381 倍。解决方案是(a)使用迈克尔的解决方案; (b) 以与图像相同的单位定义您的 clipPath(即与图像相同的宽度和高度),或 (c) 将图像包装在一个组元素中并将剪辑应用于该元素。见:jsfiddle.net/rw6R2/1

以上是关于将 clipPath 应用到带有变换的 Image 元素时出现问题的主要内容,如果未能解决你的问题,请参考以下文章

webkit 上的 clipPath 不呈现

将变换矩阵从着色器移动到 Javascript 应用程序

图像变换DIBR-3D图像变换(3D Image Warping)matlab源码

iOS:仅将仿射变换应用于子视图

理解霍夫变换[关闭]

SVG clipPath 将 *outer* 内容剪掉