代码之家 › 专栏 › 技术社区 › Tobi

svg文本路径在firefox中呈现weired

svg

Tobi · 技术社区 · 6 年前

在chrome中,这个小提琴渲染得很好,但是在firefox中,弯曲的文本是一团乱麻:

<path id="curveBelow" d="M 25,75 A 40 40 0 0 0 95,75" stroke="none" fill="none"></path>

<text class="badge-circle-text" x="42" y="40">
      <textPath alignment-baseline="middle" text-anchor="middle" href="#curveBelow">Text Belog</textPath>
</text>

我找不到Firefox中出现这种情况的原因。

有人能给我一个提示吗?我怎样才能解决或找到问题?

1 回复 | 直到 6 年前

enxaneta 6 年前

dominant-baseline="middle" 和 text-anchor="middle" 是文本的属性。另外,为了使文本居中于需要使用的路径上 startOffset = "50%" 对于 textPath 和 text anchor=“中间” 为了文本。我希望有帮助。

<svg viewBox="0 0 120 120" width=120 height=120 version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="81512f4465f92d314502bc64-alpha">
      <feColorMatrix type="saturate" values="0" result="desat"></feColorMatrix>
      <feComponentTransfer>
        <feFuncR type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1"></feFuncR>
        <feFuncG type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1"></feFuncG>
         <feFuncB type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1"></feFuncB>     
      </feComponentTransfer>
    </filter>
    <mask id="81512f4465f92d314502bc64-grungeMask" x="0" y="0" width="180" height="180" maskUnits="objectBoundingBox">
      <image x="0" y="0" width="180" height="180" filter="url(#81512f4465f92d314502bc64-alpha)" href="/grunge-mask.png"></image>
    </mask>
    <clipPath id="81512f4465f92d314502bc64-cutMiddle">
      <rect x="0" y="0" width="120" height="45"></rect>
      <rect x="0" y="75" width="120" height="45"></rect>
    </clipPath>
    <path id="81512f4465f92d314502bc64-curveAbove" d="M 25,45 A 40 40 0 0 1 95,45" stroke="none" fill="none"></path>
    <path id="81512f4465f92d314502bc64-curveBelow" d="M 25,75 A 40 40 0 0 0 95,75" stroke="none" fill="none"></path>
    <mask id="81512f4465f92d314502bc64-mainText">
      <rect width="100%" height="100%" fill="#fff" x="0" y="0"></rect>
        <text x="50%" y="50%" fill="#000" dominant-baseline="middle" text-anchor="middle">Text Center</text>
    </mask>
  </defs>
  <g mask="url(#grungeMask)">
    <circle class="badge-circle-outer-big" cx="60" cy="60" r="50" stroke="black" stroke-width="3" fill="none" clip-path="url(#81512f4465f92d314502bc64-cutMiddle)"></circle>
    <circle class="badge-circle-outer-small" cx="60" cy="60" r="47" stroke="black" stroke-width="1" fill="none" clip-path="url(#81512f4465f92d314502bc64-cutMiddle)"></circle>
    <circle class="badge-circle-inner-small" cx="60" cy="60" r="26" stroke="black" stroke-width=".5" fill="none" clip-path="url(#81512f4465f92d314502bc64-cutMiddle)"></circle>
    <circle class="badge-circle-inner-big" cx="60" cy="60" r="24" stroke="black" stroke-width="1.5" fill="none" clip-path="url(#81512f4465f92d314502bc64-cutMiddle)"></circle>
    <text dominant-baseline="middle" text-anchor="middle" class="badge-circle-text">
      <textPath startOffset="50%" href="#81512f4465f92d314502bc64-curveAbove">Text Above</textPath>
    </text>
    <text  dominant-baseline="middle" text-anchor="middle" class="badge-circle-text">
      <textPath  startOffset="50%" href="#81512f4465f92d314502bc64-curveBelow">Text Belog</textPath>
    </text>
    <path d="M 0,45 L 120,45 L 110,60 L 120,75 L 0,75 L 10,60" fill="black" class="badge-main" mask="url(#81512f4465f92d314502bc64-mainText)"></path>
  </g>
</svg>