How to make Transparent Color Code in SVG for a particular section

Question

I can't seem to get a particular part of my SVG image to be transparent. The image as a whole is, but the area inside text, like inside the d and o won't change. I've tried numerous code combos and none worked. I'm not that familiar in code and would love some help. It's the section of code in astricts and bolded below - Thanks

<path d="M 164.06 634.94 C 166.18 637.14 166.77 639.77 167.64 642.60 C 158.53 642.89 149.39 642.68 140.26 642.71 C 141.22 639.96 141.97 637.19 143.96 634.97 C 149.13 629.43 158.91 629.32 164.06 634.94 Z" fill="#XXFFFFFF></path>

Have you tried this https://stackoverflow.com/questions/6042550/svg-fill-color-transparency-alpha — Ion, Dec 14 '19 at 20:31
Marks at solved when it works. @Ion response (`fill-opacity="0.4"`) should work. — Tinmarino, Dec 14 '19 at 22:14
I tried fill-opacity="0.4" and it turned gray, I tried fill-opacity="0" and it turned white. — Jai Jai's Jewels, Dec 18 '19 at 02:05

Scalway · Answer 1 · 2019-12-14T18:56:43.997

Just use "transparent" as a color. You can also set color to partially transparent using #RRGGBBAA where AA is alpha of color (00 will be transparent and FF fully opaque).

<p style="background: linear-gradient(18deg, black, transparent);">
  <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 640 480"> 
    <path fill="transparent" d="M0 0h640v160H0z"></path> 
    <path fill="#F0F0F050" d="M0 160h640v160H0z"></path> 
    <path d="M0 320h640v160H0z"></path> 
    <path fill="red" d="M0 0h220v480H0z"></path> 
  </svg>
</p>

How to make Transparent Color Code in SVG for a particular section

1 Answers1