显示具有颜色和背景的 SVG 圆圈答案

【问题标题】：Display an SVG circle with both color and background显示具有颜色和背景的 SVG 圆圈
【发布时间】：2017-01-06 07:23:48
【问题描述】：

我想创建一个可以用颜色、背景图片和文字显示的svg气泡（有点像下图）。：

以下是我到目前为止所做的：

气泡.svg

<!DOCTYPE html>
<html>
 <body>
<svg xmlns="http://www.w3.org/2000/svg"    xmlns:xlink="http://www.w3.org/1999/xlink" width="700" height="660">
<defs>  
<pattern id="image" patternUnits="userSpaceOnUse" height="100" width="100">
  <image x="0" y="0" height="100" width="100"  xlink:href="C:\Users\i333320\Desktop\images.jpg" opacity="0.5"></image>
 </pattern>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<circle id="Oval-1" fill="url(#image)" cx="50%" cy="50%" r="30%"/>
<text x="50%" y="50%" fill="blue" stroke="red" stroke-width="1" text- anchor="middle" dy=".3em">Hello</text>
</g>
 </svg>
 </body>
 </html>

上面代码的输出是：

如何填充颜色并同时显示背景图像和颜色。可以用 html-css 还是用 React 框架？

【问题讨论】：

标签： html css reactjs svg

【解决方案1】：

您可以为此使用过滤器。 feImage 将导入图像，feBlend/screen 将图像和原始图像混合。 feComposite/in 将图像剪辑到源图形。

<svg xmlns="http://www.w3.org/2000/svg"    xmlns:xlink="http://www.w3.org/1999/xlink" width="700px" height="660px">
<defs>  
  <filter id="imageblend" primitiveUnits="objectBoundingBox">
<feImage height="120%" width="120%" xlink:href="https://upload.wikimedia.org/wikipedia/commons/8/81/Picea_abies.jpg" preserveAspectRatio="none"/>
    <feBlend mode="screen" in2="SourceGraphic"/>
    <feComposite operator="in" in2="SourceGraphic"/>
  
  </filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<circle id="Oval-1" filter="url(#imageblend)" cx="50%" cy="50%" r="30%" fill="#0044ff"/>
<text x="50%" y="50%" fill="blue" stroke="red" stroke-width="1" text- anchor="middle" dy=".3em">Hello</text>
</g>
 </svg>

【讨论】：

这正是我想要实现的！非常感谢。

【解决方案2】：

也许您可以使用带有背景颜色的 svg 覆盖另一个带有背景图像的 svg。并设置上部透明。

【讨论】：

【解决方案3】：

您甚至不需要为您的目的使用 SVG，只需通过 HTML/CSS 即可完成。你需要一个宽度和高度相等的 div 和border-radius: 100%。之后，您可以设置颜色、背景和任何其他属性。

【讨论】：

我希望在我的单个网页中有大约 30 个类似的气泡，据我所知，SVG 很容易加载。因此我想使用 SVG。这是正确的方法还是我应该选择简单的 HTML/CSS。
“易于加载”是什么意思？如果您的意思是“将比 .jpg 背景加载得更快”，答案是否定的，因为 svg 本身会自行加载相同的 .jpg。