SVG 背景文本在 Safari 和 Chrome 中被截断答案

【问题标题】：SVG background text is truncated in Safari and ChromeSVG 背景文本在 Safari 和 Chrome 中被截断
【发布时间】：2018-01-14 11:36:06
【问题描述】：

我正在尝试在我的页面中呈现动画效果的 svg 图像。图像和文本可以正常工作，但在 Safari 和 Chrome 中可视化时背景文本会被截断。

我在html中使用的代码如下

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1106px" height="auto" viewBox="0 0 1106 558" enable-background="new 0 0 1106 558" xml:space="preserve" preserveAspectRatio="xMinYMin none">
  <g id="light_1">
       <rect x="334" y="256" fill="#B60C05" width="726" height="58"/>
       <text transform="matrix(1.5 0 0 1 345 301)" fill="#FFFFFF" font-family="'Open Sans'" font-size="50" letter-spacing="3.333">SCULTURE - DESIGN</text>
  </g>
  <g id="light_3">
      <text transform="matrix(1.1 0 0 1 500 239)" fill="#B60C05" font-family="Work Sans" font-size="36" letter-spacing="1.5" font-weight="300">ALESSANDRA POLITI PAGNONI</text>
  </g>
</svg>

这里以 fiddle 为例（检查它在 Firefox 或 Safari/Chrome 中打开时的外观），采用 css 样式。

谁能帮我解决这个问题？

【问题讨论】：

标签： google-chrome svg safari

【解决方案1】：

依靠浏览器来呈现文本——尤其是使用自定义字体——完全一样不是一个好主意。解决问题的最佳方法是不使用 <text> 元素，而是将所有文本转换为路径（轮廓）。这样可以保证所有浏览器都显示完全相同的文本。

【讨论】：

谢谢，我会试试你的建议