Можно ли использовать CSS-переменные для изменения содержимого TITLE (описание при наведении курсора) объектов SVG?

Можно ли использовать переменные CSS (аналог, например, непрозрачность в style="opacity:var(--QQQ_SOMETHING_AAA, 1)" а также .ZZZ_RECTANGLES{--QQQ_SOMETHING_AAA: 0.7;} настроить название SVGS (описание при наведении курсора) <title></title>) содержимое?

Я ищу что-то, что будет использовать только функции SVG1.1 и SMIL/CSS, поэтому никаких других плагинов, которые могут ухудшить кросс-браузерную совместимость.

Вот фрагмент кода 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>

Может также содержать оба заголовка:

<title>Something here 222.</title>

а также

<title>Something here 444.</title>

в зависимости от того, находится ли он в <g class="FFF_RECTANGLES"> или же <g class="ZZZ_RECTANGLES">,

Итак, было бы неплохо, если бы код можно было изменить, например, так:

<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.;
}
Источник

1 ответ

Заголовки в SVG - это элементы, а не атрибуты. Поэтому я не верю, что есть какой-то реальный способ достичь того, что вы хотите, используя только CSS.

Поскольку JS поддерживается повсеместно, я полагаю, вы не будете возражать против использования этого для достижения этой цели?

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

Источник
Другие вопросы по тегам