mapaler
/
PADDashFormation
1
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity

svg文字不能自适应大小，还是将svg渐变色还原为css文字。

This commit is contained in:
枫谷剑仙 2024-08-08 21:21:24 +08:00
parent 4e1206e7e7
commit 1f80d5fea7
6 changed files with 108 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
multi.html
View File

@ -1466,12 +1466,7 @@ const teamsCount = 2;
<!--怪物技能-->
<div class="skill-box">
<div class="skill-title">
<svg id="active-skill-title" class="gradient-text" height="24" width="100">
<text y="18" fill="url(#gradient-active-skill)">Skill</text>
</svg>
<svg id="evolved-skill-title" class="gradient-text" height="24" width="100">
<text y="18" fill="url(#gradient-evolved-skill)">Evoveld Skill</text>
</svg>
<div class="type-title"></div>
<span class="skill-name"></span>
<div class="skill-cd-control">
<label class="skill-level-label"><input type="number" class="m-skill-level" min=1 max=99 defaultValue=1 /></label>
@ -1487,9 +1482,7 @@ const teamsCount = 2;
<!--怪物队长技能-->
<div class="skill-box">
<div class="skill-title">
<svg id="leader-skill-title" class="gradient-text" height="24" width="100">
<text y="18" fill="url(#gradient-leader-skill)">Leader Skill</text>
</svg>
<div class="type-title"></div>
<span class="skill-name"></span>
<div class="skill-parse-control">
<input type="checkbox" class="switch-ipt" name="show-skill-original" id="show-skill-original"><label for="show-skill-original"></label>
@ -1792,7 +1785,7 @@ const teamsCount = 2;
</form>
</dialog>
<svg width="0" height="0">
<!-- <svg width="0" height="0">
<defs>
<linearGradient id="gradient-active-skill" x1="0" x2="0" y1="0" y2="1">
<stop offset="25%" stop-color="white" />
@ -1806,7 +1799,18 @@ const teamsCount = 2;
<stop offset="25%" stop-color="#FFFF99" />
<stop offset="80%" stop-color="#EE7744" />
</linearGradient>
<filter id="text-stroke" x="-50%" y="-50%" width="200%" height="200%" name="inset-shadow">
<feComponentTransfer in="SourceAlpha">
<feFuncA tableValues="0 1" type="table"/>
</feComponentTransfer>
<feMorphology operator="dilate" radius="1" />
<feComposite in2="SourceAlpha" operator="out" result="offsetblur"/>
<feMerge>
<feMergeNode in="SourceGraphic"/>
<feMergeNode in="offsetblur"/>
</feMerge>
</filter>
</defs>
</svg>
</svg> -->
</body>
</html>

43
script.js
View File

@ -4178,12 +4178,12 @@ function initialize() {
editBox.show = function() {
this.classList.remove(className_displayNone);
//解决SVG问题
const activeSkillTitle = skillBox.querySelector("#active-skill-title");
const evolvedSkillTitle = skillBox.querySelector("#evolved-skill-title");
const leaderSkillTitle = leaderSkillBox.querySelector("#leader-skill-title");
svgGradientTextLengthRestore(activeSkillTitle);
svgGradientTextLengthRestore(evolvedSkillTitle);
svgGradientTextLengthRestore(leaderSkillTitle);
// const activeSkillTitle = skillBox.querySelector("#active-skill-title");
// const evolvedSkillTitle = skillBox.querySelector("#evolved-skill-title");
// const leaderSkillTitle = leaderSkillBox.querySelector("#leader-skill-title");
// svgGradientTextLengthRestore(activeSkillTitle);
// svgGradientTextLengthRestore(evolvedSkillTitle);
// svgGradientTextLengthRestore(leaderSkillTitle);
};
editBox.hide = function() {
this.classList.add(className_displayNone);
@ -7692,12 +7692,13 @@ function fastShowSkill(event) {
const s_cards = Cards.filter(card => card.activeSkillId === skillId || card.leaderSkillId === skillId); //搜索同技能怪物
showSearch(s_cards); //显示
}
function svgGradientTextLengthRestore(svg, force = false) {
if (!force && svg.width.baseVal.value > 0) return;
const text = svg.querySelector("text");
const rect = text.getBoundingClientRect();
svg.width.baseVal.value = rect.width;
}
// function svgGradientTextLengthRestore(svg, force = false) {
// if (!force && svg.width.baseVal.value > 0) return;
// const text = svg.querySelector("text");
// const rect = text.getBoundingClientRect();
// console.log(svg, rect.width)
// svg.width.baseVal.value = rect.width;
// }
function localisation($tra) {
if (!$tra) return;
document.title = $tra.webpage_title;
@ -7706,15 +7707,15 @@ function localisation($tra) {
formationBox.querySelector(".title-box .title-display").setAttribute("placeholder",$tra.title_blank);
formationBox.querySelector(".detail-box .detail-code").placeholder = $tra.detail_blank;
formationBox.querySelector(".detail-box .detail-display").setAttribute("placeholder",$tra.detail_blank);
gradientTextInit(editBox.querySelector("#active-skill-title"), $tra.active_skill_title);
gradientTextInit(editBox.querySelector("#evolved-skill-title"), $tra.evolved_skill_title);
gradientTextInit(editBox.querySelector("#leader-skill-title"), $tra.leader_skill_title);
function gradientTextInit(svg, str) {
const text = svg.querySelector("text");
text.textContent = str;
const rect = text.getBoundingClientRect();
svg.width.baseVal.value = rect.width;
}
// gradientTextInit(editBox.querySelector("#active-skill-title"), $tra.active_skill_title);
// gradientTextInit(editBox.querySelector("#evolved-skill-title"), $tra.evolved_skill_title);
// gradientTextInit(editBox.querySelector("#leader-skill-title"), $tra.leader_skill_title);
// function gradientTextInit(svg, str) {
// const text = svg.querySelector("text");
// text.textContent = str;
// const rect = text.getBoundingClientRect();
// svg.width.baseVal.value = rect.width;
// }
const s_sortList = editBox.querySelector(".search-box .sort-div .sort-list");
const sortOptions = Array.from(s_sortList.options);
sortOptions.forEach(opt => {

10
service-worker.js
View File

@ -33475,7 +33475,7 @@ const cachesMap = new Map([
],
[
"multi.html",
"8e9d49f1a8c0e07016dc5ead62dd8317"
"30b245a3cb46e63d025daa1e542a5062"
],
[
"script-custom_elements.js",
@ -33495,11 +33495,11 @@ const cachesMap = new Map([
],
[
"script.js",
"0c3b4320ce5d074a165b2db153906b5b"
"0757c99429047e0b8d8fcd41f6cbd9a3"
],
[
"solo.html",
"fc0bef8484b1f210fdcb96d16117c50c"
"5788085a03535fd2bcb9cc4a9b501f8e"
],
[
"style-fix-html2canvas.css",
@ -33511,7 +33511,7 @@ const cachesMap = new Map([
],
[
"style.css",
"f2ffbb8bc3c04f53a851b2e3de2683f3"
"a72db3303d0956396c2c482286a16ad9"
],
[
"temp.js",
@ -33519,7 +33519,7 @@ const cachesMap = new Map([
],
[
"triple.html",
"d1b8716ca989579acb89c695ce011082"
"7f9db17ef8197d1b1ea4ed102b9cdb51"
],
[
"languages/en.css",

26
solo.html
View File

@ -1236,12 +1236,7 @@ const teamsCount = 1;
<!--怪物技能-->
<div class="skill-box">
<div class="skill-title">
<svg id="active-skill-title" class="gradient-text" height="24" width="100">
<text y="18" fill="url(#gradient-active-skill)">Skill</text>
</svg>
<svg id="evolved-skill-title" class="gradient-text" height="24" width="100">
<text y="18" fill="url(#gradient-evolved-skill)">Evoveld Skill</text>
</svg>
<div class="type-title"></div>
<span class="skill-name"></span>
<div class="skill-cd-control">
<label class="skill-level-label"><input type="number" class="m-skill-level" min=1 max=99 defaultValue=1 /></label>
@ -1257,9 +1252,7 @@ const teamsCount = 1;
<!--怪物队长技能-->
<div class="skill-box">
<div class="skill-title">
<svg id="leader-skill-title" class="gradient-text" height="24" width="100">
<text y="18" fill="url(#gradient-leader-skill)">Leader Skill</text>
</svg>
<div class="type-title"></div>
<span class="skill-name"></span>
<div class="skill-parse-control">
<input type="checkbox" class="switch-ipt" name="show-skill-original" id="show-skill-original"><label for="show-skill-original"></label>
@ -1562,7 +1555,7 @@ const teamsCount = 1;
</form>
</dialog>
<svg width="0" height="0">
<!-- <svg width="0" height="0">
<defs>
<linearGradient id="gradient-active-skill" x1="0" x2="0" y1="0" y2="1">
<stop offset="25%" stop-color="white" />
@ -1576,7 +1569,18 @@ const teamsCount = 1;
<stop offset="25%" stop-color="#FFFF99" />
<stop offset="80%" stop-color="#EE7744" />
</linearGradient>
<filter id="text-stroke" x="-50%" y="-50%" width="200%" height="200%" name="inset-shadow">
<feComponentTransfer in="SourceAlpha">
<feFuncA tableValues="0 1" type="table"/>
</feComponentTransfer>
<feMorphology operator="dilate" radius="1" />
<feComposite in2="SourceAlpha" operator="out" result="offsetblur"/>
<feMerge>
<feMergeNode in="SourceGraphic"/>
<feMergeNode in="offsetblur"/>
</feMerge>
</filter>
</defs>
</svg>
</svg> -->
</body>
</html>

68
style.css
View File

@ -3098,18 +3098,46 @@ input[disabled]+.awoken-icon:active,
stroke-width: 2px; stroke: black; paint-order: stroke;
text-shadow: none;
}
.skill-title .type-title::after{
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: none;
position: absolute;
left: 5px;
.evo-panel-left .evo-type,
.skill-title .type-title
{
display: grid;
font-family: var(--game-font-family);
font-size: 15px;
line-height: 15px;
padding: 4px 0;
}
.skill-title .type-title::before{
:where(
.skill-title .type-title,
.evo-panel-left .evo-type,
)::after,
:where(
.skill-title .type-title,
.evo-panel-left .evo-type,
)::before{
grid-area: 1 / 1;
text-shadow: none;
}
:where(
.skill-title .type-title,
.evo-panel-left .evo-type,
)::after{
color: transparent;
-webkit-background-clip: text; /*垃圾Chrome，不支持无前缀的*/
background-clip: text;
/*filter: url(#text-stroke);*/
}
:where(
.skill-title .type-title,
.evo-panel-left .evo-type,
)::before{
-webkit-text-stroke: 3px black;
}
/* 主动技能 */
.row-mon-skill .type-title::after
{
@ -3927,31 +3955,7 @@ table .orb-icon
}
.evo-panel-left .evo-type{
display: grid;
font-family: var(--game-font-family);
font-size: 15px;
line-height: 15px;
padding: 4px 0;
}
.evo-panel-left .evo-type::after,
.evo-panel-left .evo-type::before{
grid-area: 1 / 1;
}
.evo-panel-left .evo-type::after
{
-webkit-background-clip: text; /*垃圾Chrome，不支持无前缀的*/
background-clip: text;
color: transparent;
}
.evo-panel-left .evo-type::before
{
/*text-shadow: black 1px 1px 0,black -1px 1px 0,black 1px -1px 0,black -1px -1px 0;*/
-webkit-text-stroke: 3px black; /*非W3C标准，但都支持*/
text-shadow: 0 3px 2px black;
}
#default-level {
width: 50px;

26
triple.html
View File

@ -2241,12 +2241,7 @@ const teamsCount = 3;
<!--怪物技能-->
<div class="skill-box">
<div class="skill-title">
<svg id="active-skill-title" class="gradient-text" height="24" width="100">
<text y="18" fill="url(#gradient-active-skill)">Skill</text>
</svg>
<svg id="evolved-skill-title" class="gradient-text" height="24" width="100">
<text y="18" fill="url(#gradient-evolved-skill)">Evoveld Skill</text>
</svg>
<div class="type-title"></div>
<span class="skill-name"></span>
<div class="skill-cd-control">
<label class="skill-level-label"><input type="number" class="m-skill-level" min=1 max=99 defaultValue=1 /></label>
@ -2262,9 +2257,7 @@ const teamsCount = 3;
<!--怪物队长技能-->
<div class="skill-box">
<div class="skill-title">
<svg id="leader-skill-title" class="gradient-text" height="24" width="100">
<text y="18" fill="url(#gradient-leader-skill)">Leader Skill</text>
</svg>
<div class="type-title"></div>
<span class="skill-name"></span>
<div class="skill-parse-control">
<input type="checkbox" class="switch-ipt" name="show-skill-original" id="show-skill-original"><label for="show-skill-original"></label>
@ -2567,7 +2560,7 @@ const teamsCount = 3;
</form>
</dialog>
<svg width="0" height="0">
<!-- <svg width="0" height="0">
<defs>
<linearGradient id="gradient-active-skill" x1="0" x2="0" y1="0" y2="1">
<stop offset="25%" stop-color="white" />
@ -2581,7 +2574,18 @@ const teamsCount = 3;
<stop offset="25%" stop-color="#FFFF99" />
<stop offset="80%" stop-color="#EE7744" />
</linearGradient>
<filter id="text-stroke" x="-50%" y="-50%" width="200%" height="200%" name="inset-shadow">
<feComponentTransfer in="SourceAlpha">
<feFuncA tableValues="0 1" type="table"/>
</feComponentTransfer>
<feMorphology operator="dilate" radius="1" />
<feComposite in2="SourceAlpha" operator="out" result="offsetblur"/>
<feMerge>
<feMergeNode in="SourceGraphic"/>
<feMergeNode in="offsetblur"/>
</feMerge>
</filter>
</defs>
</svg>
</svg> -->
</body>
</html>