应用错误收集

目标：带有阴影的讲话泡泡般的缩略图，就像这样：

尺寸和阴影可能会发生变化。

我的第一个想法当然是png叠加，但它缺乏灵活性，也不好玩。但是，它总是可以作为旧ie-s的后备。

还想过用旋转的div渲染“尾巴”，但匹配背景会是皮塔饼。

更好的方法是什么？帆布还是svg面具？几乎没有exp。有了这些技术，我们将非常感激您的一些提示。

更新：嗯，这是我在浏览文档和浏览器不一致的几个小时后想出的svg：

似乎不可能通过css将阴影的剪切路径和svg过滤器应用于html元素，因此我们必须在<svg>内渲染整个故事。
我找到了两种将图像嵌入到svg中的方法：1）适合feImage元素2）foreignObject img或div背景。< / p>
第一种方法可以看例如像这样

<svg filter="url(#dropshadow)"> <rect x="0" y="0" width="120" height="120" filter="url(#imageFilter)" clip-path="url(#clipPath)"/> </svg>

这将在FF和Chrome中都有效（我没能在Opera中使用它并且没有尝试ie9）。然而，使用此方法，FF中的图像看起来很模糊，至少在调整大小时，在Chrome中它看起来比原始图像更亮（原文！）。

需要为每个图像创建一个单独的过滤器，这只有从研究的角度来看才有意义。

第二种方法看起来像这样

<svg filter="url(#dropshadow)"> <foreignObject width="140" height="140" clip-path="url(#clipPath)"> <img src="img/ourImage.png" height="140" /> </foreignObject> </svg>

它在FF中完美运行，但Chrome和Opera都无法应用foreignObject的剪切路径（没试过ie9）。
只有FF似乎支持clippingPath中的多个元素：如果添加多个矩形，Chrome和Opera会输出一些奇怪的东西。因此，为了在Chrome中使用第一种方法，我必须在InkScape中创建path，而在FF中，我设法创建了带有两个矩形的“气泡”，一个大的，一个小的并旋转。

所以，第二种方法显得非常好，它非常灵活且易于使用。如果只有FF之外的其他浏览器会更好地支持剪切路径......

以下是jsFiddle示例：http://jsfiddle.net/B7593/11/演示了两个变体，剪切路径组合了2个矩形，因此仅适用于FF，http://jsfiddle.net/B7593/10/使用通过InkScape生成的路径元素，部分适用于Chrome。

UPDATE2：嗯，惭愧我，有第三种也是最合适的方式将图像嵌入svg：image element。