SVG背景文本在Safari和Chrome中被截断
问题描述:
我想在我的页面中呈现一个svg图像动画。图片和文字工作正常,但在Safari和Chrome中可视化时,背景文字会被截断。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 /铬中打开它如何出现)用css样式。
任何人都可以帮助我解决问题?
答
依靠浏览器呈现文本 - 尤其是自定义字体 - 完全一样不是一个好主意。解决问题的最佳方法是不要使用<text>
元素,而是将所有文本转换为路径(轮廓)。这样所有的浏览器都保证显示你的文本完全一样。
谢谢我会试试你的建议 –
Paul LeBeau你的答案解决了这个问题。谢谢 –