0

プログラムpotraceによって作成されたSVGファイルのソースがあります。これは、マルチセグメントキャラクターのコンポーネントごとに個別に作成しました。これらの同じ <path> を使用して単純にグリフ定義を作成すると、文字は表示されません。すべてのパス命令を <glyph> の "d=" 属性に詰め込むと、文字が表示されます。

SVG 仕様では、 <glyph> 要素はコンテナーであり、 <path> 要素を含めることができると明示的に述べています。動作しません (Chrome、Opera、Safari でテスト済み)。

これが私が切り詰めることができる最小の例です：

<html>
<head>
  <meta charset="utf-8" />
  <title>SVG font test sample04</title>
  <style type="text/css">
     @font-face {
       font-family: 'sample04';
       src: url('sample04.svg#sample04') format('svg');
     }
    .sample04 { font-family: "sample04", verdana, helvetica; }
  </style>
</head>
<body class="sample04"> xE014  | &#xE014; | &#xE015; | </body>
</html>

sample04.svg

<?xml version="1.0" encoding="UTF-8" ?>
<svg version="1.1" xmlns = 'http://www.w3.org/2000/svg'>
  <defs>
    <font id="sample04" horiz-adv-x="800">
      <font-face font-family="sample04" />
      <glyph unicode="&#xE014;" horiz-adv-x="800" 
              d="M0,0h200v200h-200z M400,0h200v200h-200z"/>
      <glyph unicode="&#xE015;" horiz-adv-x="800">
        <path d="M0,0h200v200h-200z"/>
        <path d="M400,0h200v200h-200z"/>
      </glyph>
    </font>
  </defs>
</svg>

2 つのグリフは同じ情報を持っていることに注意してください。最初のグリフは <glyph> d= 属性内に完全に含まれており、2 番目のグリフは 2 つの <path> 要素に分けられた情報を持っています。<path> 要素を 1 つだけ使用してみましたが、良い結果は得られませんでした。

では、これは仕様が派手で、ブラウザがそれに対応していない別のケースですか?

注: 私がそれほど気にかけている理由は、フォントに埋め込むこれらの SVG ファイルが 5000 近くあり、ソースを変換するために XML 変換にそれほど重くのしたくなかったからです...

4

0 に答える 0