SVG tspan元素+ font-family样式？
SVG tspan元素+ font-family样式？
提问于 2018-10-23 03:10:05
我尝试在svg按钮内的tspan元素中指定字体系列。它似乎没有注册，我也找不到任何关于这方面的文档。我只在svg中找到了text元素的文档。我无数次的尝试都没有得到与网站其余部分风格相匹配的文本。我需要它来使用谷歌的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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52936240
复制相关文章
相似问题