在html中以灵活的方式渲染带有阴影的缩略图一样的气泡

目标：带有阴影的语音气泡状缩略图，如下所示：

大小和阴影可能会发生变化

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

还考虑了使用旋转div渲染“tail”，但匹配其中的背景将是pita

有什么更好的办法？画布还是svg掩码？对这些技术几乎没有经验，所以一些开始的提示将非常感谢

更新：好吧，在浏览了几个小时的文档和浏览器不一致性之后，我想到了svg：

似乎不可能通过css将剪切路径和svg阴影过滤器应用于html元素，因此我们必须在

中呈现整个故事

我找到了两种将图像嵌入svg的方法：1）使用

feImage

元素进行匹配；2）使用

img

进行

foreignObject

或使用背景进行

div

第一种方法可以如下所示

这将在FF和Chrome中都起作用（我在Opera中无法实现，也没有尝试ie9）。然而，使用这种方法，FF中的图像看起来很模糊，至少如果调整大小，并且在Chrome中看起来比原始图像更轻（sic！）

需要为每幅图像创建一个单独的过滤器，这使得它只从研究的角度来看很有趣

第二种方法可以如下所示

它在FF中可以完美地工作，但Chrome和Opera都无法将剪辑路径应用于

foreignObject

（没有尝试ie9）

似乎只有FF支持

clippingPath

中的多个元素：如果添加多个矩形，Chrome和Opera会输出一些奇怪的东西。因此，为了在Chrome中使用第一种方法，我必须在InkScape中创建一个

路径

，而在FF中，我设法创建了两个矩形的“气泡”，一个大，一个小，并旋转

因此，第二种方法看起来很好，它非常灵活，易于使用。如果只有FF以外的浏览器能够更好地支持剪切路径

以下是JSFIDLE示例：演示了两个变体，其中剪切路径由两个矩形组合而成，因此仅适用于FF，使用InkScape生成的path元素，部分适用于Chrome

---

更新2:好吧，真不好意思，有第三种也是最合适的方式将图像嵌入到svg中。

如果您想将其作为svg，我会这样做：

• 为化身使用光栅图像
• 使用使用路径元素定义气泡形状的剪辑路径
• 将剪辑路径应用于图像元素
• 对图像元素应用svg过滤器以获得阴影

然后重复使用基本设置，只需替换化身url即可。使用Inkscape或Illustrator快速制作原型应该相当简单

更新：

---

以下是我的意思。

在谷歌上搜索svg到html转换器0.7 使用转换器引擎上的查找打开clipart库，并在bubble上搜索该站点。 找到一个通用的，并在Inkscape中修改它 将其转换为JavaScript 有三种以上的选择。 你现在有了纯拉斐尔的演讲泡泡。

---

您可以在任何地方使用气泡和相关阴影，使用Raphael scale（x，y）动态控制气泡的大小。

imo，您最好的选择是覆盖常规矩形图像的png/gif遮罩。。。我不认为HTML/CSS/JS可以达到这种效果easily@Joseph，就轻松性而言，你绝对是对的。事实上，这是我已经做过的。但是1）如果有（我知道会有）需要改变阴影颜色或模糊或其他东西，那么我需要再次进行拍照，2）我体内的黑客不睡觉；）好。。。我能想出的最好的方法是需要大量的硬编码和与bg相同颜色的遮罩。。。而且它没有阴影。。。所以一句话“失败”，但至少看起来很漂亮谢谢。这就是我经过一些学习和阅读svg文档后得出的结论：。但是，我无法将过滤器应用于渲染元素。尝试将“style='filter:url（#dropshadow）；”以及“filter:url（#dropshadow）；”添加到不同的元素：div、clipPath和path，但这些都不起作用。我也不知道如何轻松地改变气泡的大小。嗯，。我认为使用foreignObject来处理svg可以轻松处理的东西太过分了。好吧，感谢这个例子，现在我明白了。但是，以这种方式定义剪切路径只在Opera中对我有效。对，clipPath中不允许使用g元素，我已经更新了该示例，使其也适用于其他浏览器。感谢您指向Raphael，它对于缩放和转换svg非常有用。但是，它不支持剪切路径，所以在我的例子中它似乎没有用。