SVG Masking or SVG background-image is not working

[Manouki]

Please help me.

I never been as active online. I asked this at several places now, read só many questions, answers, tutorials and what not. I just can’t get this figured out. I need help.

As seen here;

SVG

I am trying to work out SVG masking. What I just don’t understand is whenever I replace the current CSS mask (which I copied from another project on codepen to practice with/as an example), it shows blank.

I tried exporting with Affinity Designer in many different ways. I tried different software online to export with because perhaps the software causes it. I even attempted a SVG converter online, to see if that file would work. I also, instead, tried to give the path the background image instead of refering to it with CSS.

None of it works.

Help =/. I do not know where I go from here. I need to figure this out but I don’t even understand what or where it is going wrong.

[robheyays]

Is this a general question to link a background Image or do you need to use SVG masking only?

[Manouki]

I wish to use SVG masking only.

[robheyays]

Here is some info that might be useful.

CSS

1. Width and Height:

• Make sure your SVG has a defined width and height. Set it using attributes or CSS.
• Avoid using height alone, especially when set to 100% or auto.
• Consider setting both width and height explicitly.

2. Check for Interference:

• Look at your CSS for clip-path or mask properties that might interfere with the image.
• Sometimes styling issues might be happening elsewhere in your SVG.
  HTML

  <defs>
    <linearGradient id="Gradient">
      <stop offset="0" stop-color="black" />
      <stop offset="1" stop-color="white" />
    </linearGradient>
    <mask id="Mask">
      <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)" />
    </mask>
  </defs>
  <rect x="0" y="0" width="200" height="200" fill="green" />
  <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" />
</svg>

HTML
<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="cut-off-bottom">
      <rect x="0" y="0" width="200" height="100" />
    </clipPath>
  </defs>
  <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />
</svg>```

[robheyays]

HTML

Tag must be paired, missing: [ </svg> ], open tag match failed [ <svg version=“1.1” id=“svg” xmlns=“SVG namespace” xmlns:xlink=“XLink namespace” x=“0px” y=“0px”
viewBox=“0 0 960 560” style=“enable-background:new 0 0 960 560;” xml:space=“preserve”> ] on line 7.
CSS came back clean.