Question

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

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

Bubble.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框架？

Answer 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>

Answer 2

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

Answer 3

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

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

3 个答案: