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

Mapaler · Aug 8, 2024 · 1f80d5f · 1f80d5f
1 parent 4e1206e
commit 1f80d5f
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 91 deletions.
diff --git a/multi.html b/multi.html
@@ -1466,12 +1466,7 @@
 					<!--怪物技能-->
 					<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 @@
 					<!--怪物队长技能-->
 					<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 @@
 		</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 @@
 				<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>
diff --git a/script.js b/script.js
@@ -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 => {

diff --git a/service-worker.js b/service-worker.js
@@ -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,15 +33511,15 @@ const cachesMap = new Map([
 	],
 	[
 		"style.css",
-		"f2ffbb8bc3c04f53a851b2e3de2683f3"
+		"a72db3303d0956396c2c482286a16ad9"
 	],
 	[
 		"temp.js",
 		"17d9246fbd4efc02a9e9515b973275cb"
 	],
 	[
 		"triple.html",
-		"d1b8716ca989579acb89c695ce011082"
+		"7f9db17ef8197d1b1ea4ed102b9cdb51"
 	],
 	[
 		"languages/en.css",

diff --git a/solo.html b/solo.html
@@ -1236,12 +1236,7 @@
 					<!--怪物技能-->
 					<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 @@
 					<!--怪物队长技能-->
 					<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 @@
 		</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 @@
 				<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>
diff --git a/style.css b/style.css
@@ -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;

diff --git a/triple.html b/triple.html
@@ -2241,12 +2241,7 @@
 					<!--怪物技能-->
 					<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 @@
 					<!--怪物队长技能-->
 					<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 @@
 		</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 @@
 				<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>