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>

样本04.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>

请注意，这两个字形具有相同的信息，第一个完全包含在 <glyph> d= 属性中，第二个将信息分成两个 <path> 元素。我只尝试了一个 <path> 元素，但没有更好的结果。

那么这只是另一种规格闪闪发光而浏览器不符合要求的情况吗？

注意：我如此关心的原因是我有将近 5000 个这些 SVG 文件要嵌入到字体中，并且真的不想如此深入地进行 XML 转换以转换源...

4

0 回答 0