我使用 Adobe Illustrator CS6 生成 SVG 图像。此图片位于我的网站媒体文件夹 (root/sitemedia/images/)。我把它作为超大屏幕的背景,但它不显示任何东西,只是一个空白图像。当我在浏览器(Safari、FF、Chrome)中打开时,它会显示我想要的图像。
我使用的css代码是
.jumbotron{
background: url(../images/jumbo-bg.svg) center no-repeat #FFF;
background-size: cover;
}
Illustrator 生成的代码是
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, 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="central" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="640px" height="480px" viewBox="0 0 640 480" enable-background="new 0 0 640 480" xml:space="preserve">
<image overflow="visible" width="640" height="480" id="image1" xlink:href="folder/image1.png" transform="matrix(1.0002 0 0 1.0002 0 0)">
</image>
</svg>
我已经更改了根文件夹图像的 xlink:href,但它不起作用。这张图片怎么了?
最佳答案
如果您将 SVG 文件显示为背景图像(或任何其他图像类型,如 html <img>
或 SVG <image>
),它必须在单个文件中完整以防止隐私泄露。
将您的 png 编码为 data URI在 SVG 文档中,它应该可以工作。
关于html - SVG 不在 linkedin 中显示图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31301422/