0

次のコード ブロック (ここから取得) では、フォントが SVG ファイルに埋め込まれています。テキストは、次の行を使用してレンダリングされます。

<text x="40" y="50" font-family="larabie-anglepoise" font-size="70" fill="#933">SVG</text>

この行では、グリフは Unicode 値 (S、V、および G) によって参照されます。ただし、すべてのグリフに Unicode 値 (代替、装飾など) があるわけではありません。Unicode 値の代わりにグリフ名または ID を参照してテキストをレンダリングするにはどうすればよいでしょうか?

参照用の完全なコードは次のとおりです。

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.2" baseProfile="tiny" viewBox="0 0 160 70"  xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Font example</title>
    <defs>
        <font horiz-adv-x="313" xml:id="la">
            <metadata>Converted from Larabie Anglepoise by Batik ttf2svg
            See http://www.larabiefonts.com/ </metadata>
            <font-face font-family="larabie-anglepoise" units-per-em="1000" 
                panose-1="0 0 4 0 0 0 0 0 0 0" ascent="703" descent="-300" alphabetic="0"/>
            <missing-glyph horiz-adv-x="500" d="M63 0V700H438V0H63ZM125 63H375V638H125V63Z"/>
            <glyph unicode="S" glyph-name="S" horiz-adv-x="385" d="M371 1H29V144H264Q264 151 264
                166Q265 180 265 188Q265 212 249 212H132Q83 212 55 247Q29 279 29
                329V566H335V422H136V375Q136 360 144 356Q148 355 168 355H279Q327 355 352 309Q371 273
                371 221V1Z"/>
            <glyph unicode="V" glyph-name="V" horiz-adv-x="351" d="M365 563L183 -33L0 563H101L183
                296L270 563H365Z"/>
            <glyph unicode="G" glyph-name="G" horiz-adv-x="367" d="M355
                1H18V564H355V420H125V144H248V211H156V355H355V1Z"/>
            <hkern g1="V" g2="G" k="-40"/>
        </font>
    </defs>
    <text x="40" y="50" font-family="larabie-anglepoise" font-size="70" fill="#933">SVG</text>
    <rect x="00" y="00" width="160" height="70" stroke="#777" fill="none"/>
</svg>
4

1 に答える 1

1

を使用します<altGlyph>。簡単な例：

<text>
  <altGlyph xlink:href="#myFooGlyph">foo</altGlyph>
</text>

テキストのレンダリングに使用されるフォント<glyph>にidが含まれている場合、そのグリフがレンダリングされます。myFooGlyphそうでない場合は、foo代わりに文字列がレンダリングされます（SVGフォントがサポートされていない場合にも発生します）。

于 2013-01-31T11:39:37.300 に答える