tspan elements appear outside of SVG text bounds in Safari

问题

I'm making a website for a local band and they wanted a design with outlined text. I look up how to do this and found that the only way to have transparent fill and a solid outline is to use SVG text. I've built the site for them and it works fine in Chrome/Firefox/Opera, but there are a number of problems in Safari.

When you hover over one of the letters of the logo on the first page, it should change to solid white and play a sound. To do this, I've split the text element by letters, using tspan elements, and have each letter trigger a JavaScript hover event. For some reason the hover area in Safari is below the letters themselves, is there any way I can force them back to their correct position?

Here's the HTML for the SVG text. There are two copies of the text layered over the top of each other, this is because I needed to fade in a glow effect and this was the only way I could find to do it (incidentally, the glow effect doesn't render in Safari, but that's a separate issue). For this example, however, the styling is directly applied to the tspan element (with no fade) and the #glowLogo element remains hidden.

<div id="logoWrap">
  <svg id="mainLogo" viewbox="0 0 10 2">
    <text id="glowLogo" class="shadow" x="5" y="1" text-anchor="middle" font-size="0.9" fill="#FFFFFF" font-family="Arial Black">
      <tspan data-sound="M">M</tspan>
      <tspan data-sound="O">O</tspan>
      <tspan data-sound="O2">O</tspan>
      <tspan data-sound="N">N</tspan>
      <tspan data-sound="O3">O</tspan>
      <tspan data-sound="V">V</tspan>
      <tspan data-sound="E">E</tspan>
      <tspan data-sound="R">R</tspan>
      <tspan data-sound="S">S</tspan>
      <tspan data-sound="U">U</tspan>
      <tspan data-sound="N">N</tspan>
    </text>
    <text id="soundLogo" class="textHover" x="5" y="1" text-anchor="middle" font-size="0.9" fill="none" stroke-width=".015" stroke="#FFFFFF" font-family="Arial Black">
      <tspan data-sound="M">M</tspan>
      <tspan data-sound="O">O</tspan>
      <tspan data-sound="O2">O</tspan>
      <tspan data-sound="N">N</tspan>
      <tspan data-sound="O3">O</tspan>
      <tspan data-sound="V">V</tspan>
      <tspan data-sound="E">E</tspan>
      <tspan data-sound="R">R</tspan>
      <tspan data-sound="S">S</tspan>
      <tspan data-sound="U">U</tspan>
      <tspan data-sound="N2">N</tspan>
    </text>
  </svg>
</div>

And here's the relevant CSS:

#logoWrap {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

#linksPage {
  position: absolute;
  margin-top: 100vh;
}

#mainLogo {
  width: 100%;
  position: absolute;
  top: 50%;
  cursor: default;
  margin-top: -6vw;
}

.shadow,
tspan.on {  /*  class applied by javascript event */
  fill: #FFFFFF;
  text-shadow: 0 0 15px #FFFFFF;
}

tspan.on {  /*  class applied by javascript event */
  stroke-width: 0;
}

text a {
  cursor: pointer;
  cursor: hand;
}

#glowLogo {
  opacity: 0;
}

Here's the JavaScript event, for clarification:

$(".textHover tspan").hover(function() {
  $(this).addClass("on");
  document.getElementById($(this).attr("data-sound")).currentTime = 0;
  document.getElementById($(this).attr("data-sound")).play();
}, function() {
  $(this).removeClass("on");
});

A live version of the site can be found here: http://ewanroycroft.co.uk/mos/

Thanks in advance for any suggestions!

来源：https://stackoverflow.com/questions/48997305/tspan-elements-appear-outside-of-svg-text-bounds-in-safari

标签

html

css

svg

safari

vector-graphics