SafariとChromeでSVG背景テキストが切り捨てられます

Question

私のページにアニメーション化されたsvgイメージをレンダリングしようとしています。画像とテキストは正常に機能しますが、SafariとChromeで視覚化すると背景のテキストが切り捨てられます。

私はHTMLで使用されるコードは、ここでのCSSスタイルで（FirefoxでやSafari/Chromeで開いた場合、それがどのように表示されるか確認してください）例としてfiddleだ次

<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> 

されます。

誰でも問題を解決するのに役立ちますか？

Answer 1

特に、カスタムフォントを使用してテキストをレンダリングするブラウザに依存することは、まったく同じことではありません。あなたの問題に対する最善の解決策は、<text>要素を使用せず、すべてのテキストをパス（アウトライン）に変換することです。そうすれば、すべてのブラウザでテキストを正確に表示できます。