HTML 文档中嵌入的 SVG 中使用的 SVG 掩码不起作用
SVG mask used in SVG embedded in HTML document not working
我正在为 Dredark.io 制作一个 HTML 文件版本的破坏者列表，因为我制作的载有该列表的船已经毁了。一个我认为是我朋友的白痴去提拔所有加入队长级别的人，他们都把一切都搞砸了。但是，我对显示每个破坏者最后一次出现的部分有疑问：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 文档时它就停止工作了。我能做的最好的事情就是让整个事情消失。我已经尝试了所有方法，并且一直在整个网络上搜索修复程序，但除了你们这些好心的人之外，我已经失去了所有希望。我做错了什么，我该如何解决？
Svg <mask> 将不会应用，如果包含它的 svg 是通过 display: none 隐藏的。
但是你可以这样隐藏它
#prototypes {
position: absolute;
width.0;
height: 0;
overflow: hidden;
}
这也适用于其他 svg 元素，例如 <clipPath> 或过滤器。
因此，以这种方式隐藏包含所有资产和定义的 svg 实际上是一种更好的做法。
工作示例
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>
我正在为 Dredark.io 制作一个 HTML 文件版本的破坏者列表，因为我制作的载有该列表的船已经毁了。一个我认为是我朋友的白痴去提拔所有加入队长级别的人，他们都把一切都搞砸了。但是，我对显示每个破坏者最后一次出现的部分有疑问：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 文档时它就停止工作了。我能做的最好的事情就是让整个事情消失。我已经尝试了所有方法，并且一直在整个网络上搜索修复程序，但除了你们这些好心的人之外，我已经失去了所有希望。我做错了什么，我该如何解决？
Svg <mask> 将不会应用，如果包含它的 svg 是通过 display: none 隐藏的。
但是你可以这样隐藏它
#prototypes {
position: absolute;
width.0;
height: 0;
overflow: hidden;
}
这也适用于其他 svg 元素，例如 <clipPath> 或过滤器。
因此，以这种方式隐藏包含所有资产和定义的 svg 实际上是一种更好的做法。
工作示例
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>