Is it possible to use CSS variables to change the the TITLE (description on hover) contents of SVG objects?

问题

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?

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.

Here's a MWE code snippet:

.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>

It would be nice if the

<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>

and

<title>Something here 444.</title>

depending on whether it is in <g class="FFF_RECTANGLES"> or <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>

The title could then be stated in:

.ZZZ_RECTANGLES{
  --QQQ_SOMETHING_AAA: 0.7;
  --QQQ_SOMETHING_BBB: 0.2;
  --SSS_SOMETHING: Something here 222.;
}

and

.FFF_RECTANGLES{
  --PPP_SOMETHING_AAA: 0.2;
  --PPP_SOMETHING_BBB: 0.7;
  --TTT_SOMETHING: Something here 444.;
}

回答1:

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.

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"/>

来源：https://stackoverflow.com/questions/50998972/is-it-possible-to-use-css-variables-to-change-the-the-title-description-on-hove

标签

svg

css-variables