【发布时间】：2022-02-10 15:44:39
【问题描述】：
我正在为 Dredark.io 制作一个 griefer 列表的 HTML 文档版本，因为我制作的带有该列表的船被毁了。一个白痴，我以为我的朋友去提拔所有加入队长级别的人，他们都把一切都搞砸了。但是，我对显示每个 griefer 的最后一次外观的部分有疑问：SVG mask="url(#face/body/legs/hand)" 属性不起作用。
<!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>作为它自己的文件，SVG 图像确实支持它，但是由于某种原因，当我将它嵌入到 HTML 文档中时，它就停止了工作。我能做的最好的就是让整个事情消失。我已经尝试了所有方法，并且一直在整个网络上寻找修复方法，但除了你们这些好心人之外，我已经失去了所有希望。我做错了什么，我该如何解决？
【问题讨论】：
-
那些矩形填充（
!----、!-_--）被 JavaScript 替换为十六进制颜色代码。