SVG在Firefox浏览器中显示不正确

Question

我有下一个svg对象，它在Chrome和AI中表现良好，但在Firefox中显示不正确。在我的svg中我有2个textPath标签，我尝试为它们设置斜体字体样式，但只有1个textPath受影响。如果我仍然希望2个textPath元素在1个svg对象中，我该如何解决？

<svg width="229" height="95" viewBox="0 0 98.59523272091116 43.1456805813697" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none"><g id="0.13161635632674862"><text fill="#FF0000" stroke="#FFFF00" data-stroke="FFFF00" stroke-width="0px" stroke-linecap="round" stroke-linejoin="round" x="" y="2.1527343388845233" text-anchor="start" font-size="24px" font-family="Carter One" data-textcurve="1" data-itemzoom="1 1" data-textspacing="0" style="font-style: italic; font-weight: normal; text-decoration: none;font-family: 'Carter One';" itemzoom="0.4305468677769046 0.45416505875126006"><textPath xlink:href="#textPath-item-4" style="stroke: rgb(255, 255, 0); stroke-width: 3.31429px;" data-stroke="rgb(255, 255, 0)"><tspan dy="0">Create</tspan></textPath><textPath xlink:href="#textPath-item-4"><tspan dy="0" style="stroke-width: 0px;">Create</tspan></textPath></text></g><defs><path id="textPath-item-4" d="M 4.5 28.240596987479876 A 5443.099053742821 5443.099053742821 0 0 1 99.4987942273035 28.240596987479876"></path><style>@font-face {
    font-family: 'Carter One';
  src: local('Carter One'), local('CarterOne'), url(http://fonts.gstatic.com/s/carterone/v9/VjW2qt1pkqVtO22ObxgEBfk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
}</style></defs></svg>

Answer 1

问题似乎是您选择的字体Carter One没有斜体变体。因此浏览器需要使用回退（据我所知，这相当于使字形倾斜）。 Firefox似乎失败了同时发明的＃34;斜体字体，绘制笔划并将其写在文本路径上。

在一个文本中使用多个textPath元素不是问题。仅当同时使用非零stroke-width和font-style:italics时，才需要引用具有已知斜体样式的字体。例如Lato有一个：

＆＃13;

＆＃13;

<svg width="229" height="95" viewBox="0 0 98.59523272091116 43.1456805813697" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none">
<g id="0.13161635632674862">
  <text fill="#FF0000" stroke="#FFFF00" data-stroke="FFFF00" stroke-width="0px" stroke-linecap="round" stroke-linejoin="round" x="" y="2.1527343388845233" text-anchor="start" font-size="24px" font-family="Carter One" data-textcurve="1" data-itemzoom="1 1" data-textspacing="0" style="font-style: italic; font-weight: normal; text-decoration: none;font-family: 'Ubuntu';" itemzoom="0.4305468677769046 0.45416505875126006">
    <textPath xlink:href="#textPath-item-4" style="stroke: rgb(255, 255, 0); stroke-width: 3.31429px;" data-stroke="rgb(255, 255, 0)"><tspan dy="0">Create</tspan></textPath>
    <textPath xlink:href="#textPath-item-4"><tspan dy="0" style="stroke-width: 0px;">Create</tspan></textPath>
  </text>
</g>
<defs>
  <path id="textPath-item-4" d="M 4.5 28.240596987479876 A 5443.099053742821 5443.099053742821 0 0 1 99.4987942273035 28.240596987479876"></path>
  <style>
@font-face {
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: 700;
  src: local('Ubuntu Bold Italic'), local('Ubuntu-BoldItalic'), url(https://fonts.gstatic.com/s/ubuntu/v11/4iCp6KVjbNBYlgoKejZPslyPN4E.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
  </style>
</defs>
</svg>

＆＃13;

＆＃13;

＆＃13;

顺便说一句，虽然我并不确切知道哪些浏览器支持它，但至少大多数现代浏览器似乎都知道paint-order CSS属性，这样就不需要两次绘制文本。 paint-order:stroke描绘填充下方的笔划：

＆＃13;

＆＃13;

<svg width="229" height="95" viewBox="0 0 98.59523272091116 43.1456805813697" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none">
<g id="0.13161635632674862">
  <text fill="#FF0000" stroke="#FFFF00" data-stroke="FFFF00" stroke-width="0px" stroke-linecap="round" stroke-linejoin="round" x="" y="2.1527343388845233" text-anchor="start" font-size="24px" font-family="Carter One" data-textcurve="1" data-itemzoom="1 1" data-textspacing="0" style="font-style: italic; font-weight: normal; text-decoration: none;font-family: 'Ubuntu';" itemzoom="0.4305468677769046 0.45416505875126006">
    <textPath xlink:href="#textPath-item-4" style="stroke: rgb(255, 255, 0); stroke-width: 3.31429px;paint-order:stroke" data-stroke="rgb(255, 255, 0)"><tspan dy="0">Create</tspan></textPath>
</g>
<defs>
  <path id="textPath-item-4" d="M 4.5 28.240596987479876 A 5443.099053742821 5443.099053742821 0 0 1 99.4987942273035 28.240596987479876"></path>
  <style>
@font-face {
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: 700;
  src: local('Ubuntu Bold Italic'), local('Ubuntu-BoldItalic'), url(https://fonts.gstatic.com/s/ubuntu/v11/4iCp6KVjbNBYlgoKejZPslyPN4E.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
  </style>
</defs>
</svg>

＆＃13;

＆＃13;

＆＃13;