灵活地在 html 中渲染带有阴影的气泡状缩略图
目标：带有阴影的类似语音气泡的缩略图，如下所示：
http://min.us/ moStWhsGd http://k.minus.com/jbkSDvCUDvhYcj.jpg
大小和阴影可能会发生变化。
我的第一个想法当然是 png 叠加，但它缺乏灵活性，而且也不好玩。然而，它总是可以作为旧 ie-s 的后备。
还考虑过用旋转的 div 渲染“尾巴”，但匹配其中的背景将是皮塔饼。
更好的方法是什么？画布或者 svg 蒙版？几乎没有经验。有了这些技术，我们将非常感谢一些入门技巧。
更新：嗯，这就是我在浏览文档和浏览器不一致几个小时后想到的 svg：
- 似乎不可能通过 css 将剪切路径和用于阴影的 svg 过滤器应用到 html 元素，所以我们必须在
中渲染整个故事。 我发现了两种将图像嵌入到 svg 中的方法：1) 使用
feImage元素进行拟合 2)foreignObject使用img或div带背景。第一种方法可以看起来像这样
这在 FF 和 Chrome 中都可以工作（我没能在 Opera 中工作，也没有尝试 ie9）。然而，使用这种方法，FF 中的图像看起来会模糊，至少在调整大小时是这样，而在 Chrome 中，它看起来比原始图像更亮（原文如此！）。
需要为每个图像创建单独的过滤器，这使得仅从研究的角度来看它很有趣。
第二种方法可以如下所示
它在 FF 中完美运行，但 Chrome 和 Opera 都无法将剪切路径应用于
foreignObject（没有尝试 ie9）。似乎只有 FF 支持
clippingPath中的多个元素：如果添加多个矩形，Chrome 和 Opera 会输出一些奇怪的内容。因此，为了在 Chrome 中使用第一种方法，我必须在 InkScape 中创建一个路径，而在 FF 中，我设法创建带有两个矩形（一大一小并旋转）的“气泡”。< /p>
所以，第二种方法看起来不错，相当灵活且易于使用。如果只有 FF 以外的其他浏览器能够更好地支持剪切路径就好了……
以下是 jsFiddle 示例： http://jsfiddle.net /B7593/11/ 演示了两种变体，剪切路径由 2 个矩形组合而成，因此仅适用于 FF、http://jsfiddle.net/B7593/10/ 使用 InkScape 生成的路径元素，部分适用于 Chrome 。
更新2：好吧，真让我感到羞愧，还有第三种也是最合适的将图像嵌入到 svg 中的方法：图像元素。
Goal: speech-bubble-like thumbnails with a shadow, like this one:
http://min.us/moStWhsGd http://k.minus.com/jbkSDvCUDvhYcj.jpg
Size and shadow are subject to change.
My first idea was of course png overlays, but it lacks flexibility and is also not fun. However, it is always possible as a fallback for old ie-s.
Also thought about rendering the "tail" with rotated div, but matching background in it would be a pita.
What'd be the better way? Canvas or maybe an svg mask? Have little to no exp. with these technologies, so a few tips to start will be very appreciated.
UPDATE: Well, that's what I came up with svg after some hours of navigating through the docs and browser inconcistencies:
- It seems impossible to apply both clipping path and svg filter for shadow to an html element via css, so we have to render the whole story inside an
<svg>. I found two ways of embedding image into an svg: 1) fiter with
feImageelement 2)foreignObjectwithimgordivwith background.First method can look e.g. like this
<svg filter="url(#dropshadow)">
<rect x="0" y="0" width="120" height="120" filter="url(#imageFilter)" clip-path="url(#clipPath)"/>
</svg>That will work both in FF and Chrome (I failed to make it work in Opera and didn't try ie9). However with this method image in FF appears to be blurred, at least if resized, and in Chrome it looks lighter (sic!) than the original.
The need to create a separate filter for each image makes it interesting only from the research point of view.
Second method can look like this
<svg filter="url(#dropshadow)">
<foreignObject width="140" height="140" clip-path="url(#clipPath)">
<img src="img/ourImage.png" height="140" />
</foreignObject>
</svg>It works flawlessly in FF, but neither Chrome nor Opera can apply clipping path to
foreignObject(didn't try ie9).Only FF seems to support multiple elements within
clippingPath: if you add more than one rectangle there Chrome and Opera output something weird. So in order to use the first method in Chrome I had to create apathin InkScape, while in FF I managed to create the "bubble" with two rectangles, one big and one small and rotated.
So, the second method appears pretty nice, it is rather flexible and easy to use. If only other browsers than FF would support clipping paths better…
Here are the jsFiddle examples: http://jsfiddle.net/B7593/11/ demonstrates both variants with clipping path combined of 2 rectangles so works only in FF, http://jsfiddle.net/B7593/10/ uses path element generated with InkScape and partially works in Chrome.
UPDATE2: Well, shame on me, there is a third and the most appropriate way of embedding images into svg: the image element.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果你想将其作为 svg 进行，我会这样做：
然后重用基本设置并只需替换头像 url。使用 Inkscape 或 Illustrator 制作快速原型应该相当简单。
更新：
这是我的意思的示例。
If you want to do it as an svg, here's how I'd do that:
Then reuse the basic setup and just replace the avatar url. It should be fairly straightforward to make a quick prototype using Inkscape or Illustrator.
Update:
Here's an example of what I meant.
谷歌搜索 svg to html converter 0.7
使用转换器引擎上的查找打开剪贴画库并在 bubble 上的该网站上进行搜索。
找到一个通用的并在 Inkscape 中更改它
将其转换为 JavaScript
有超过 3 个选项。
现在你的讲话泡泡是纯拉斐尔风格的。
您可以在任何地方使用气泡和关联的阴影，使用拉斐尔比例（ x ， y ）动态控制其大小
Do a google search for svg to html converter 0.7
Use the lookup on the converter engine to open the clipart library and do a search on that site on bubble.
Find a generic one and alter it in Inkscape
Convert it to JavaScript
There are more than 3 options.
You now have your speech bubble in pure Raphael.
You can use the bubble and associated shadow anywhere controlling it size dynamically using Raphael scale( x , y )