Question

我在渲染包含文本的SVG图像时遇到了奇怪的问题。当我在DEF的部分中添加自定义字体并将图像嵌入文档的正文中时，一切正常。

但是，当我将相同的SVG代码定义为CSS图像URL的一部分时，会看到奇怪的行为。

首先，当我的编辑器（语法突出显示）和浏览器在css定义中看到结束的“ style”标记时，都标记了一个问题。在下面给出的示例中，我对结束样式标签使用了html编码，以使页面实际运行！但是，请问您可以看到，由于CSS背景方法显示的字体使用了错误的字体。

我不知道问题是否出在我正在编码结束样式标签，并且结果没有被正确解释。

在这里看看我的工作示例！ https://jsfiddle.net/j72ayfrn/

如果您编辑CSS并更改为仅使用常规的结束标记，则不会呈现任何内容。复制代码并在浏览器中运行，即可在屏幕上打印代码。

任何想法！！谢谢

HTML

<div class="size This_Works">

        </div>
        <div class="size This_Doesnt">
                <svg width='390' height='54' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'>
                    <defs>
                        <style type='text/css'> 
                            @font-face {
                                font-family: 'Charmonman';
                                font-style: normal;
                                font-weight: 400;
                                src: local('Charmonman Regular'), local('Charmonman-Regular'), url(https://fonts.gstatic.com/s/charmonman/v1/MjQDmiR3vP_nuxDv47jiaJaivQ.woff2) format('woff2');
                            }
                        </style>
                    </defs>
                    <style type='text/css'> 
                        .st0 {
                            font-family:'Charmonman';
                        } 
                    </style> 
                    <text x='50%' y='50%' text-anchor='middle' dominant-baseline='central' class='st0' style='fill:rgb(37,37,38);'>This font is Right</text>
                </svg>
        </div>

CSS

.size {
            width: 500px;
            height: 200px;
            background-color: ;
        }
        .This_Doesnt {
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            background-image: url("data:image/svg+xml;utf8,<svg width='390' height='54' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><defs><style type='text/css'> @font-face { font-family: 'Charmonman'; font-style: normal; font-weight: 400; src: local('Charmonman Regular'), local('Charmonman-Regular'), url(https://fonts.gstatic.com/s/charmonman/v1/MjQDmiR3vP_nuxDv47jiaJaivQ.woff2) format('woff2'); } %3C%2Fstyle%3E </defs><style type='text/css'> .st0{font-family:'Charmonman';} %3C%2Fstyle%3E <text x='50%' y='50%' text-anchor='middle' dominant-baseline='central' class='st0' style='fill:rgb(37,37,38);'>The font is wrong</text></svg>");
        }

嵌入式CSS SVG图像中的关闭样式不起作用

0 个答案: