是否可以使用CSS变量来更改SVG对象的TITLE(悬停说明)内容? [英] Is it possible to use CSS variables to change the the TITLE (description on hover) contents of SVG objects?
本文介绍了是否可以使用CSS变量来更改SVG对象的TITLE(悬停说明)内容?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
是否可以使用CSS变量(类似于style="opacity:var(--QQQ_SOMETHING_AAA, 1)"和.ZZZ_RECTANGLES{--QQQ_SOMETHING_AAA: 0.7;}中的 opacity 之类的变量来调整SVGS的TITLE(悬停在<title></title>上的描述)内容?
Is it possible to use CSS variables (analogue to e.g. opacity in style="opacity:var(--QQQ_SOMETHING_AAA, 1)" and .ZZZ_RECTANGLES{--QQQ_SOMETHING_AAA: 0.7;} to tweak the SVGS's TITLE (description on hover <title></title>) contents?
我正在寻找仅使用SVG1.1功能和SMIL/CSS的产品，因此没有其他插件可能会破坏跨浏览器的兼容性.
I'm looking for something that will use only SVG1.1 features and SMIL/CSS, so no other plug-ins that might worsen cross-browser compatibility.
这是一个 MWE 代码段:
.HIDDEN_LAYER{
visibility:hidden;
opacity:0;
}
.CLICKME_TICKBOX{
fill:white;
stroke:black;
}
.CLICKED_TICKBOX{
fill:white;
stroke:black;
}
.CLICKME_TEXTS{
font-family:sans-serif;
font-size:16px;
}
.CLICKED_TEXTS{
font-family:sans-serif;
font-size:16px;
stroke:black;
stroke-width:0.5;
}
.BOTTOM-LAYER_RECTANGLES{
fill:white;
stroke:black;
}
.ZZZ_RECTANGLES{
visibility:hidden;
cursor:help;
fill:yellow;
stroke:black;
--QQQ_SOMETHING_AAA: 0.7;
--QQQ_SOMETHING_BBB: 0.2;
}
.FFF_RECTANGLES{
visibility:hidden;
cursor:help;
fill:red;
stroke:black;
--PPP_SOMETHING_AAA: 0.2;
--PPP_SOMETHING_BBB: 0.7;
}
.LEGENDBOX_ZZZ{
fill:yellow;
stroke:black;
}
.LEGENDBOX_FFF{
fill:red;
stroke:black;
}
.LEGENDS{
cursor:pointer;
}
<svg id="SVG"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="1320"
height="1125"
viewBox="-15 -45 1350 1155">
<symbol id="SOMETHING_AAA">
<use
xlink:href="#RECTANGLE"
transform="translate(637.5, 25)"
style="
opacity:var(--QQQ_SOMETHING_AAA, 1);
fill-opacity:var(--PPP_SOMETHING_AAA, 1)
">
</use>
</symbol>
<symbol id="SOMETHING_BBB">
<use
xlink:href="#RECTANGLE"
transform="translate(15, 215)"
style="
opacity:var(--QQQ_SOMETHING_BBB, 1);
fill-opacity:var(--PPP_SOMETHING_BBB, 1)
">
</use>
</symbol>
<g class="BOTTOM-LAYER_RECTANGLES">
<use xlink:href="#SOMETHING_AAA" />
<use xlink:href="#SOMETHING_BBB" />
</g>
<g class="ZZZ_RECTANGLES">
<use xlink:href="#SOMETHING_AAA">
<title>Something here 111.</title>
</use>
<use xlink:href="#SOMETHING_BBB">
<title>Something here 222.</title>
</use>
<set
to="visible"
attributeType="CSS"
attributeName="visibility"
end="CLICKED_ZZZ.click;bg.click"
begin="CLICKME_ZZZ.click" />
<set
to="1"
attributeType="CSS"
attributeName="opacity"
end="CLICKED_ZZZ.click;bg.click"
begin="CLICKME_ZZZ.click" />
</g>
<g class="FFF_RECTANGLES">
<use xlink:href="#SOMETHING_AAA">
<title>Something here 333.</title>
</use>
<use xlink:href="#SOMETHING_BBB">
<title>Something here 444.</title>
</use>
<set
to="visible"
attributeType="CSS"
attributeName="visibility"
end="CLICKED_DDD.click;bg.click"
begin="CLICKME_DDD.click" />
<set
to="1"
attributeType="CSS"
attributeName="opacity"
end="CLICKED_DDD.click;bg.click"
begin="CLICKME_DDD.click" />
</g>
<g id="LEGENDS"
class="LEGENDS"
transform="translate(15, -15)">
<g id="ZZZ">
<g id="CLICKME_ZZZ">
<rect id="CLICKME_TICKBOX_ZZZ"
class="CLICKME_TICKBOX"
x="0"
y="0"
width="15"
height="15">
</rect>
<use id="CLICKME_LEGENDBOX_ZZZ"
class="LEGENDBOX_ZZZ"
x="30"
y="-5"
xlink:href="#LEGENDBOX">
</use>
<text id="CLICKME_TEXT_ZZZ"
class="CLICKME_TEXTS"
x="65"
y="12.5">
Click me
</text>
</g>
<g id="CLICKED_ZZZ"
class="HIDDEN_LAYER">
<use id="CLICKED_TICKBOX_ZZZ"
x="0"
y="0"
xlink:href="#CLICKED_TICKBOX">
</use>
<use id="CLICKED_LEGENDBOX_ZZZ"
class="LEGENDBOX_ZZZ"
x="30"
y="-5"
xlink:href="#LEGENDBOX">
</use>
<text id="CLICKED_TEXT_ZZZ"
class="CLICKED_TEXTS"
x="65"
y="12.5">
Click me
</text>
<set
to="visible"
attributeType="CSS"
attributeName="visibility"
end="CLICKED_ZZZ.click;bg.click"
begin="CLICKME_ZZZ.click" />
<set
to="1"
attributeType="CSS"
attributeName="opacity"
end="CLICKED_ZZZ.click;bg.click"
begin="CLICKME_ZZZ.click" />
</g>
<animate id="ZZZ_ANIMATE"
fill="freeze"
dur="3s"
keyTimes="0;1"
values="0;1"
attributeType="CSS"
attributeName="opacity" />
</g>
<g id="DDD"
transform="translate(0,40)">
<g id="CLICKME_DDD">
<rect id="CLICKME_TICKBOX_FFF"
class="CLICKME_TICKBOX"
x="0"
y="0"
width="15"
height="15">
</rect>
<use id="CLICKME_LEGENDBOX_FFF"
class="LEGENDBOX_FFF"
x="30"
y="-5"
xlink:href="#LEGENDBOX">
</use>
<text id="CLICKME_TEXT_FFF"
class="CLICKME_TEXTS"
x="65"
y="12.5">
Click me
</text>
</g>
<g id="CLICKED_DDD"
class="HIDDEN_LAYER">
<use id="CLICKED_TICKBOX_FFF"
x="0"
y="0"
xlink:href="#CLICKED_TICKBOX">
</use>
<use id="CLICKED_LEGENDBOX_FFF"
class="LEGENDBOX_FFF"
x="30"
y="-5"
xlink:href="#LEGENDBOX">
</use>
<text id="CLICKED_TEXT_FFF"
class="CLICKED_TEXTS"
x="65"
y="12.5">
Click me
</text>
<set
to="visible"
attributeType="CSS"
attributeName="visibility"
end="CLICKED_DDD.click;bg.click"
begin="CLICKME_DDD.click" />
<set
to="1"
attributeType="CSS"
attributeName="opacity"
end="CLICKED_DDD.click;bg.click"
begin="CLICKME_DDD.click" />
</g>
<animate id="DDD_ANIMATE"
fill="freeze"
dur="3s"
keyTimes="0;1"
values="0;1"
attributeType="CSS"
attributeName="opacity" />
</g>
</g>
<defs id="DEFINITIONS">
<rect id="RECTANGLE"
width="85"
height="95">
</rect>
<rect id="RECTANGLE_YELLOW"
width="42.5"
height="95">
</rect>
<rect id="LEGENDBOX"
x="0"
y="0"
width="25"
height="25">
</rect>
<path id="CLICKED_TICKBOX"
class="CLICKED_TICKBOX"
d="M 0,0 15,15 M 0,15 15,0 M 0,0 15,0 15,15 0,15 Z"/>
</defs>
如果
<use
xlink:href="#RECTANGLE"
transform="translate(15, 215)"
style="
opacity:var(--QQQ_SOMETHING_BBB, 1);
fill-opacity:var(--PPP_SOMETHING_BBB, 1)
">
</use>
还可以同时包含两个标题:
Could also contain both of the titles:
<title>Something here 222.</title>
和
<title>Something here 444.</title>
取决于它是在<g class="FFF_RECTANGLES">还是<g class="ZZZ_RECTANGLES">中.
因此，最好更改代码，例如:
So, it would be nice if the code could be altered, for example as:
<use
xlink:href="#RECTANGLE"
transform="translate(15, 215)"
style="
opacity:var(--QQQ_SOMETHING_BBB, 1);
fill-opacity:var(--PPP_SOMETHING_BBB, 1)"
title=:var(--SSS_SOMETHING, Or else it will be this.);
var(--TTT_SOMETHING, Or else it will be that.)"
">
</use>
标题可以这样写:
.ZZZ_RECTANGLES{
--QQQ_SOMETHING_AAA: 0.7;
--QQQ_SOMETHING_BBB: 0.2;
--SSS_SOMETHING: Something here 222.;
}
和
.FFF_RECTANGLES{
--PPP_SOMETHING_AAA: 0.2;
--PPP_SOMETHING_BBB: 0.7;
--TTT_SOMETHING: Something here 444.;
}
推荐答案
SVG中的标题是元素，而不是属性.因此，我认为没有任何可行的方法可以仅使用CSS来实现您想要的功能.
Titles in SVG are elements, not attributes. So I don't believe there is any feaible way to achieve what you want using only CSS.
由于JS被普遍支持，所以我想您不会反对使用JS来实现这一目标吗?
Since JS is universally supported, I assume you wouldn't have objection to using that to achieve this?
// Take the text typed into the input box, and use it for the tootip for the red rectangle
document.getElementById("title-input").addEventListener("input", function(evt) {
setTitleText("rect-title", this.value);
});
function setTitleText(elementId, newText) {
document.getElementById(elementId).textContent = newText;
}
<svg>
<rect y="50" width="200" height="50" fill="red">
<title id="rect-title">Default title</title>
</rect>
</svg>
<p>Enter some text to use as a title tooltip for the rect</p>
<input type="text" id="title-input"/>
这篇关于是否可以使用CSS变量来更改SVG对象的TITLE(悬停说明)内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
