Harshil Harshil - 3 months ago 37
React JSX Question

Display an SVG circle with both color and background

I want to create one svg bubble that can be displayed with color,background image and text(somewhat like the following image).:

bubble.png

Following is what I've done so far:

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>


And output of above code is:

Output

How can I fill color and display both background image as well as color.
It can be done with html-css or should I use React framework?

Answer

You can use a filter for this. feImage will import an image, feBlend/screen will blend the image and the original. feComposite/in will clip the image to the source graphic.

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