正如标题所述,我有一个svg图像,但我无法在safari和opera中呈现它.但它在Firefox中运行得非常好.我找到了这篇文章
已提到将内容更改为xhtml.所以,我在html页面的顶部添加了这个,
<meta http-equiv="Content-Type" content="application/xhtml+xml">
但它仍然无效.
我正在将svg图像嵌入到我的JS文件中
this.my_object.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image xlink:href="img/gauge.png" width="122" height="127"/><g id="needle" transform="rotate(0,62,62)"><circle cx="62" cy="62" r="4" style="fill: #c00; stroke: none"/><rect transform="rotate(-130,62,62)" name="arrow" x="58" y="38" width="8" height="24" style="fill: #c00; stroke: none"/><polygon transform="rotate(-130,62,62)" points="58,39,66,39,62,30,58,39" style="fill: #c00; stroke: none"/></g><text id="value" x="35" y="103" focusable="false" editable="no" style="stroke:none; fill:#fff; font-family: monospace; font-size: 12px"></text></svg>';
这可能是原因吗？我不是通过传统机制来称呼它.
我也在这里粘贴svg代码,
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g name="gauge" width="122px" height="127px">
<image xlink:href="gauging.png" width="122" height="127"/>
<circle id="led" cx="39" cy="76" r="5" style="fill: #999; stroke: none">
<animateColor id="ledAnimation" attributeName="fill" attributeType="css" begin="0s" dur="1s" …我正在一个网站上工作,我正在使用SVG片段文件,并通过CSS背景图像加载特定的SVG.
我也有一个PNG后备和我使用的是下面作为作为工作基础: https://css-tricks.com/a-complete-guide-to-svg-fallbacks/#fallback-svg-css-background -图片
例
.ico-arrow-right {
background: url(ico-arrow-right.png);
background: url(sprite-collection.svg#arrowright),
linear-gradient(transparent, transparent);
}
问题是,它似乎在大多数浏览器上运行良好,但在桌面和IOS浏览器的Safari中,SVG不会出现,只显示一个空格.考虑到这一点,似乎设备上的Safari/webkit,在使用CSS背景图像时不喜欢SVG片段精灵.
有没有解决方案/解决这个问题？我还是想用CSS背景图像中的PNG/SVG拉,不希望恢复使用单独的SVG文件,有超过60个svgs,我不希望所有这些服务器的请求!
谢谢大家
我有几个我想在页面上布局的SVG图像.Firefox和Chrome没有给我任何问题,但当且仅当文档具有".xhtml"扩展名时,Safari才会显示SVG图像.如果我尝试使用PHP代码(以及".php"扩展名),我在".xhtml"文档中使用的完全相同的标记将不再显示SVG图像.问题当然是,我必须使用PHP来完成手头的项目.有什么建议？这是源代码:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:lang="de" xmlns:xml="http://www.w3.org/XML/1998/namespace">
<head>
<title>SVG Safari Test</title>
</head>
<body>
<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve"><circle cx="250" cy="250" r="238.048"/></svg>
</body>
</html>