SVG tspan 元素 + 字体家族风格？答案

【问题标题】：SVG tspan element + font-family style?SVG tspan 元素 + 字体家族风格？
【发布时间】：2018-10-22 19:10:05
【问题描述】：

我正在尝试在 svg 按钮内的 tspan 元素内指定字体系列。它似乎没有注册，我无法找到任何关于此的文档。我只找到了 svg 中文本元素的文档。我的无数次尝试都没有使文本与网站其余部分的风格相匹配。我需要它来使用来自 Google 的 Raleway 字体的精简版。

HTML

<svg viewbox="0 0 86 20" version="1.1" baseProfile="full" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <g>
    <path id="thisID" d="M 80 5 A 100 100 0 0 0 22.2 27.2 L 37.58 42.58 A 80 80 0 0 1 80 27.2 Z"></path>
    <text font-family:"Raleway:thin" fill="gold">
        <defs>
    <style type="text/css">@import url('https://fonts.googleapis.com/css?family=Raleway:thin');</style>
</defs>
         <textPath style="font-size:6pt;" xlink:href="#thisID" startOffset="63%" >
            <tspan dy="-6">Home</tspan>
      </textPath>
    </text>
  </g>
</svg>

新尝试

嗯，我尝试使用下面的方法没有成功。我在这里错过了什么？

<svg viewbox="0 0 86 20" version="1.1" baseProfile="full" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
          <style type="text/css">
        <![CDATA[   

  @import url('https://fonts.googleapis.com/css?family=Raleway:thin');
              {font-family:Raleway}

             ]]> 
  </style>
  <g>
    <path onclick="window.location='index.html';" id="thisID" d="M 80 5 A 100 100 0 0 0 22.2 27.2 L 37.58 42.58 A 80 80 0 0 1 80 27.2 Z"></path>
    <text font-family:"Raleway:thin" fill="gold">
         <textPath style="font-size:6pt;" xlink:href="#thisID" startOffset="63%" >
            <tspan dy="-6">Home</tspan>
      </textPath>
    </text>
  </g>
</svg>

【问题讨论】：

标签： html css svg

【解决方案1】：

您忘记声明字体系列。

<svg viewbox="0 0 86 20" version="1.1" baseProfile="full" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
   <style type="text/css">
        <![CDATA[   
  
  @import url('https://fonts.googleapis.com/css?family=Raleway:thin');
     text{font-family:Raleway}
     
             ]]> 
  </style>
  <g>
    <path id="thisID" d="M 80 5 A 100 100 0 0 0 22.2 27.2 L 37.58 42.58 A 80 80 0 0 1 80 27.2 Z"></path>
    <text font-family:"Raleway:thin" fill="gold">
<textPath style="font-size:6pt;" xlink:href="#thisID" startOffset="63%" >
            <tspan dy="-6">Home</tspan>
      </textPath>
    </text>
  </g>
</svg>

【讨论】：

非常感谢您一如既往的帮助和耐心。我已经使用您上面的方法发布了另一次尝试，但由于某种原因，我无法复制您的结果。你能看到我的代码中缺少什么吗？