SVG mask used in SVG embedded in HTML document not working-CodePudding

I am making an HTML document version of a griefer list for Dredark.io because the ship I made that had the list was ruined. An idiot I thought was my friend went promoting everyone who joined to captain rank and they all messed EVERYTHING up. However, I am having issues with the portion that shows the last seen appearance of each griefer: the SVG mask="url(#face/body/legs/hand)" attribute is not working.

<!DOCTYPE html>
<html>
    <head>
        <title>Dredark.io Griefers</title>
        <script>
            var list = {
                "clown": {
                    warning: 15,
                    hair: "none",
                    skin: "#ff8800",
                    shirt: "#111111",
                    pants: "#000000",
                    proof: "Many people know him as a griefer"
                },
                "SMARTLABRAT": {
                    warning: 1,
                    hair: "none",
                    skin: "#ffeeaa",
                    shirt: "#11aa11",
                    pants: "#1122aa",
                    proof: "none"
                }
            };
            function load(){
              var max = 0;
              var sorted = [];
              for(var prop in list){
                if(list[prop].warning >= max){
                  max = list[prop].warning;
                }
              }
              var cur = max;
              for(var i = max; i > 0; i--){
                for(var prop in list){
                  if(list[prop].warning == i){
                    sorted.push(prop);
                  }
                }
              }
              var html = "";
              var warningColors = ["#00ff00","#44ff00","#88ff00","#aaff00","#ffff00","#ffaa00","#ff8800","#ff4400","#ff0000"];
              for(var i = 0; i < sorted.length; i  ){
                var color = "";
                for(var j = 0; j < warningColors.length; j  ){
                    if(list[sorted[i]].warning >= (j * 10)){
                        color = warningColors[j];
                    }
                }
                html = "<tr><td>"   (i   1)   "</td><td>"   sorted[i]   "</td><td style='background: "   color   ";'>"   list[sorted[i]].warning   "</td><td>"   list[sorted[i]].proof   "</td><td>"   document.getElementById("skin").outerHTML.replace(/!----/g,"#00ff00").replace("!_---","#222222").replace("!-_--","#111111")   "</td></tr>";
                document.getElementById("list").innerHTML  = html;
              }
            }
            window.onload = function(){
                load();
            };
        </script>
        <style>
            #list{
                border: 1px solid #004400;
            }
            #prototypes{
                display: none;
            }
        </style>
    </head>
    <body>
        <details>
            <summary>Because the previous one was ruined</summary>
            <p>by <b>La Danse Macabre</b>, someone I trusted.</p>
            <details>
                <summary>Note to <b>La Danse Macabre</b>:</summary>
                <p>Do not promote random people to <u>Captain</u> on <b>MY</b> ships!</p>
            </details>
        </details>
        <p>The warning level of a griefer depends on how many ships they griefed and how much hard work is lost to them per ship. Griefers with a level below <code>20</code> are not really that bad and can still be trusted. Griefers with a level of less than <code>5</code> mean that they are possible but not proven.</p>
        <div id="prototypes">
            <svg id='skin' xmlns='http://www.w3.org/2000/svg' width='50px' height='80px' viewbox='0 0 50 80'>
                <defs>
                    <mask maskContentUnits="userSpaceOnUse" id="face" width="50" height="80" viewbox="0 0 50 80"><image href="https://test.drednot.io/img/player_head.png" x="0" y="0"/></mask>
                    <mask maskContentUnits="userSpaceOnUse" id="body"><image href="https://test.drednot.io/img/player.png" x="17" y="7"/>
                    <image href="https://test.drednot.io/img/player_arm.png" x="20" y="-5"/></mask>
                    <mask maskContentUnits="userSpaceOnUse" id="legs"><image href="https://test.drednot.io/img/player_leg.png" x="17" y="8"/>
                    <image href="https://test.drednot.io/img/player_leg.png" x="20" y="8"/></mask>
                    <mask maskContentUnits="userSpaceOnUse" id="hand"><image href="https://test.drednot.io/img/player_hand.png" x="19" y="-5"/></mask>
                </defs>
                <rect x="0" y="0" width="100" height="100" fill="!----" mask="url(#face)"/>
                <rect x="0" y="0" width="100" height="100" fill="!_---" mask="url(#body)"/>
                <rect x="0" y="0" width="100" height="100" fill="!-_--" mask="url(#legs)"/>
                <rect x="0" y="0" width="100" height="100" fill="!----" mask="url(#hand)"/>
                <image href="https://test.drednot.io/img/player_face.png" x="0" y="0"/>
                <image href="https://test.drednot.io/img/player_foot.png" x="17" y="8"/>
                <image href="https://test.drednot.io/img/player_foot.png" x="20" y="8"/>
            </svg>
        </div>
        <table id="list" border="1" cellSpacing="0px">
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Warning level</th>
                <th>Proof</th>
                <th>Last seen appearance</th>
            </tr>
        </table>
    </body>
</html>

As its own file, the SVG image DOES support it, but for some reason when I embed it within the HTML document it just stops working. The best I can do is make the whole thing disappear. I have tried everything and I have been searching the whole web for a fix but I have lost all hope other than you kind people. What am I doing wrong and how do I fix this?

CodePudding user response：

Svg <mask> won't be applied, if your svg containing it is hidden via display: none.

But you can hide it like so

#prototypes {
  position: absolute;
  width.0;
  height: 0;
  overflow: hidden;
}

This also applies to other svg elements like <clipPath> or filters.
So It's actually a better practice to hide your svg containing all assets and definitions this way.

Workin example

var list = {
  "clown": {
    warning: 15,
    hair: "none",
    skin: "#ff8800",
    shirt: "#111111",
    pants: "#000000",
    proof: "Many people know him as a griefer"
  },
  "SMARTLABRAT": {
    warning: 1,
    hair: "none",
    skin: "#ffeeaa",
    shirt: "#11aa11",
    pants: "#1122aa",
    proof: "none"
  }
};

function load() {
  var max = 0;
  var sorted = [];
  for (var prop in list) {
    if (list[prop].warning >= max) {
      max = list[prop].warning;
    }
  }
  var cur = max;
  for (var i = max; i > 0; i--) {
    for (var prop in list) {
      if (list[prop].warning == i) {
        sorted.push(prop);
      }
    }
  }
  var html = "";
  var warningColors = ["#00ff00", "#44ff00", "#88ff00", "#aaff00", "#ffff00", "#ffaa00", "#ff8800", "#ff4400", "#ff0000"];
  for (var i = 0; i < sorted.length; i  ) {
    var color = "";
    for (var j = 0; j < warningColors.length; j  ) {
      if (list[sorted[i]].warning >= (j * 10)) {
        color = warningColors[j];
      }
    }
    html = "<tr><td>"   (i   1)   "</td><td>"   sorted[i]   "</td><td style='background: "   color   ";'>"   list[sorted[i]].warning   "</td><td>"   list[sorted[i]].proof   "</td><td>"   document.getElementById("skin").outerHTML.replace(/!----/g, "#00ff00").replace("!_---", "#222222").replace("!-_--", "#111111")   "</td></tr>";
    document.getElementById("list").innerHTML  = html;
  }
}
window.onload = function() {
  load();
};

#list {
  border: 1px solid #004400;
}

#prototypes {
  position: absolute;
  width.0;
  height: 0;
  overflow: hidden;
}

<details>
  <summary>Because the previous one was ruined</summary>
  <p>by <b>La Danse Macabre</b>, someone I trusted.</p>
  <details>
    <summary>Note to <b>La Danse Macabre</b>:</summary>
    <p>Do not promote random people to <u>Captain</u> on <b>MY</b> ships!</p>
  </details>
</details>
<p>The warning level of a griefer depends on how many ships they griefed and how much hard work is lost to them per ship. Griefers with a level below <code>20</code> are not really that bad and can still be trusted. Griefers with a level of less than <code>5</code>  mean that they are possible but not proven.</p>
<div id="prototypes">
  <svg aria-hidden="true" id='skin' xmlns='http://www.w3.org/2000/svg' width='50px' height='80px' viewbox='0 0 50 80'>
                <defs>
                    <mask maskContentUnits="userSpaceOnUse" id="face" width="50" height="80" viewbox="0 0 50 80"><image href="https://test.drednot.io/img/player_head.png" x="0" y="0"/></mask>
                    <mask maskContentUnits="userSpaceOnUse" id="body"><image href="https://test.drednot.io/img/player.png" x="17" y="7"/>
                    <image href="https://test.drednot.io/img/player_arm.png" x="20" y="-5"/></mask>
                    <mask maskContentUnits="userSpaceOnUse" id="legs"><image href="https://test.drednot.io/img/player_leg.png" x="17" y="8"/>
                    <image href="https://test.drednot.io/img/player_leg.png" x="20" y="8"/></mask>
                    <mask maskContentUnits="userSpaceOnUse" id="hand"><image href="https://test.drednot.io/img/player_hand.png" x="19" y="-5"/></mask>
                </defs>
                <rect x="0" y="0" width="100" height="100" fill="!----" mask="url(#face)"/>
                <rect x="0" y="0" width="100" height="100" fill="!_---" mask="url(#body)"/>
                <rect x="0" y="0" width="100" height="100" fill="!-_--" mask="url(#legs)"/>
                <rect x="0" y="0" width="100" height="100" fill="!----" mask="url(#hand)"/>
                <image href="https://test.drednot.io/img/player_face.png" x="0" y="0"/>
                <image href="https://test.drednot.io/img/player_foot.png" x="17" y="8"/>
                <image href="https://test.drednot.io/img/player_foot.png" x="20" y="8"/>
            </svg>
</div>
<table id="list" border="1" cellSpacing="0px">
  <tr>
    <th>#</th>
    <th>Name</th>
    <th>Warning level</th>
    <th>Proof</th>
    <th>Last seen appearance</th>
  </tr>
</table>