SVGtspan元素+字体-家庭风格?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (45)

我试图在svg按钮内指定tspan元素内的字体系列。它似乎没有注册,我无法找到任何相关的文档。我只找到了svg里面文本元素的文档。我的多次尝试都没有导致文本与网站其他部分的风格相匹配。我需要它来使用谷歌的瘦版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>
提问于
用户回答回答于

你忘了声明font-family。

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

扫码关注云+社区

领取腾讯云代金券