Question

我正在尝试在背景图像上使用SVG，如：

.logo
{position: absolute;
width: 300px; height: 300px;
background-image: url(../img/logo.svg);
background-size: 256px 256px;
background-repeat: no-repeat;}

这适用于Safari，Firefox，Chrome，但不适用于Opera，我不会遇到问题。

示例Chrome 24：

[CHROME]（我很抱歉，我从主持人那里删除了这个例子）

Opera 12.14示例：

[OPERA]（我很抱歉，我从主持人那里删除了这个例子）

更新1：

SVG文件

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g>
    <path fill="#00A99D" d="M41.027,96.075H16.375v-54.84c0-10.062,2.636-18.258,7.91-24.586c3.032-3.647,6.888-6.547,11.568-8.7
    c4.68-2.153,9.48-4.23,14.402-4.23c9.798,0,18.061,4.296,24.784,10.887c6.724,6.591,10.085,14.677,10.085,24.256
    c0,9.316-3.341,17.357-10.019,24.124c-6.68,6.769-14.59,10.151-23.729,10.151c-1.495,0-3.691-0.154-6.591-0.462
    c0,0,15.358-31.682,15.358-34.277c0-2.592-0.945-4.801-2.834-6.625c-1.891-1.823-4.153-2.735-6.79-2.735
    c-6.328,0-9.491,4.373-9.491,13.117V96.075z"/>
</g>
<g>
    <path fill="#003333" d="M67.922,9.087 M56.177,30.83c-1.147-0.565-2.048-1.283-3.411-1.283c-5.88,0-8.821,4.373-8.821,13.117
    v53.411H21.038V41.741c0-17.062,2.45-18.258,7.351-24.586c6.874-8.876,18.079-15.234,29.436-12.2
    c3.438,0.918,6.994,2.387,10.098,4.132"/>
</g>
<polyline fill="#003333" points="15.557,19.809 21.038,47 40,44 40,20 "/>
</svg>

Answer 1

删除svg中的width和height属性可以很好地呈现（在Opera 12中测试）。

Opera中的SVG使用带有缩放的CSS背景图像

1 个答案: