SVG在Opera中使用CSS背景图像与缩放 [英] SVG in Opera using CSS background-image with scaling

问题描述

我想在背景图像上使用SVG：

I'm trying to use an SVG on background-image like:

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

这适用于Safari，Firefox，Chrome

This works on Safari, Firefox, Chrome, but not on Opera and I don't get the problem.

Chrome 24示例：

Example Chrome 24:

[CHROME ]（对不起，我从主机中删除了示例）

[CHROME](I'm so sorry, I deleted the example from host)

示例Opera 12.14：

Example Opera 12.14:

OPERA]（很抱歉，我从主机中删除了此示例）

[OPERA](I'm so sorry, I deleted the example from host)

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

推荐答案

code>和高度属性在svg中使它渲染得很好（在Opera 12测试）。

Removing the width and height attributes in the svg makes it render nicely (tested in Opera 12).

这篇关于SVG在Opera中使用CSS背景图像与缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！