相关疑难解决方法(0)

正如标题所述,我有一个svg图像,但我无法在safari和opera中呈现它.但它在Firefox中运行得非常好.我找到了这篇文章

使用Safari显示SVG的Doctype问题

已提到将内容更改为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" …

以下代码在Safari中不起作用,图像不显示.这只发生在Safari中,它适用于所有其他浏览器,我无法弄清楚原因.这是CSS代码:

.hero {
        background: url(images/cards.svg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        height:180px;
        width:100%;
        margin-bottom:20px;
    }

和HTML代码:

<div class="hero"></div>

更新:上面的代码在将"cards.svg"转换为JPG时有效,但我宁愿使用SVG,因为它们加载速度更快.为什么SVG不会出现在Safari(7.0.1)中？根据http://caniuse.com,支持SVG作为CSS背景图像但不会显示.

我创建了一个使用 raphaeljs 库绘制各种 SVG 元素的页面，但我在 Safari 中遇到了一些问题。

我正在绘制图像并使用剪切路径来掩盖某些区域。然后，用户可以点击这些图像“浏览”到放置在后面的其他图像。

这在 Firefox 和 Chrome 甚至 IE 中都能正常工作。但在 Safari 中我无法点击浏览图像。剪切路径似乎在 Safari 中不起作用。

我通过这个问题发现Safari 的内容类型必须设置为“application/xhtml+xml”，因为它不使用 html5 解析器。

我已经尝试过将其放在页面顶部的建议......

<?php
header('Content-type: application/xhtml+xml');
?>

...但是浏览器只输出 html 文件。

我只是想知道我需要什么文档类型才能使 safari 正确绘制嵌入 SVG，例如 chrome 和 firefox？

这就是我绘制 SVG 图像的方式，它在 chrome 和 firefox 中运行良好

function myDraw(path, url, x, y, w, h, id){

    //create clipPath Element
  var clippath = document.createElementNS("http://www.w3.org/2000/svg","clipPath");  
  clippath.setAttribute("id", id);
  svgcanv.appendChild(clippath);

  //draw the path
  var cp=paper.path(path).translate(x, y).attr({stroke: 0});
  $(cp.node).appendTo('#'+id+'');

    //assoc clipPath with image
  var img = paper.image(url,x,y,w,h);//.attr({fill:"#111",opacity:0.7}); …