Safari中SVG渲染错误的解决方案？_Svg_Rendering_Mobile Safari

Safari中SVG渲染错误的解决方案？

svg

Safari中SVG渲染错误的解决方案？,svg,rendering,mobile-safari,Svg,Rendering,Mobile Safari,我希望对于我一直遇到的这个bug有一些解决方案。它的本质是.svg图像将以其适当大小的一小部分随机呈现。几年前我就有过这个bug，但它似乎已经被清除了。然而，我正在工作的网站现在很难找到这个bug。由于它是一个移动网站，主要是针对iPhone的，所以它必须在mobile Safari中正常工作以下是指向JSFIDLE的链接：如果单击渲染代码结果底部的不同“按钮”，它们将变为蓝色。我用css更改文本，通过将src属性与不同的图像（蓝色图像）交换来更改图像。很简单。但是使用SVG，交换的图像有时

我希望对于我一直遇到的这个bug有一些解决方案。它的本质是.svg图像将以其适当大小的一小部分随机呈现。几年前我就有过这个bug，但它似乎已经被清除了。然而，我正在工作的网站现在很难找到这个bug。由于它是一个移动网站，主要是针对iPhone的，所以它必须在mobile Safari中正常工作

以下是指向JSFIDLE的链接：

如果单击渲染代码结果底部的不同“按钮”，它们将变为蓝色。我用css更改文本，通过将src属性与不同的图像（蓝色图像）交换来更改图像。很简单。但是使用SVG，交换的图像有时会弄乱。这个错误也发生在桌面Safari上，所以你只需点击链接就可以看到它的发生

我希望有办法绕过这个错误。除了切换到光栅图像之外的其他内容。矢量图像有很多奇妙的特性，包括很小的尺寸，这在使用手机连接不好的应用程序时非常棒

现在。。。这个网站坚持我发布代码，而不仅仅是小提琴的链接。很公平，如果你想这样做：

HTML：

<body>
    ...
    <footer>
        <ul>
            <li><a id="odo"><img src="http://img.menulizard.com/odo.svg">Odometer</a>
            <li><a id="gas"><img src="http://img.menulizard.com/gas.svg">Gas</a>
            <li><a id="yum"><img src="http://img.menulizard.com/yum.svg">Meals</a>
            <li><a id="bus"><img src="http://img.menulizard.com/bus.svg">Misc</a>
            <li><a id="set"><img src="http://img.menulizard.com/set.svg">Settings</a>
        </ul>
    </footer>
</body>

JavaScript：

$(function()
{
set_nav_bar("odo");

$("footer a").click(function($e)
    {
    $go_to = $(this).attr("id");
    set_nav_bar($go_to);
    $e.preventDefault();
    });

});

function set_nav_bar($go_to)
{
$("#odo img").attr("src","http://img.menulizard.com/odo.svg");
$("#gas img").attr("src","http://img.menulizard.com/gas.svg");
$("#yum img").attr("src","http://img.menulizard.com/yum.svg");
$("#bus img").attr("src","http://img.menulizard.com/bus.svg");
$("#set img").attr("src","http://img.menulizard.com/set.svg");
$("#odo,#gas,#yum,#bus,#set").css("color","");

$("#"+$go_to+" img").attr("src","http://img.menulizard.com/"+$go_to+".on.svg");
$("#"+$go_to).css("color","#0099ff");
}

使用两个

元素，每个图像一个，将它们放在另一个上面（位置：绝对），调整图像的不透明度或z-指数，这样你就能看到其中一个。我想如果我这样做，我可以使它更简单。只需依次放置img标签，并根据需要显示/隐藏正确的标签。如果没有更好的解决办法，我会试试的。它甚至可能无法避免这个错误，它是如此随机。我尝试了双图像技术，但是当我这样做的时候，我似乎遇到了其他的撕裂问题。具体来说，我得到的幻影间距会轻推“打开”图像，这样它们就不会与“关闭”图像对齐。因此，我尝试使用我原来的技术，但删除并重新创建整个图像标记，而不是仅仅更改“src”。它可以工作，没有微小的svg渲染。然而，这样做会导致所有图像中出现大量缓慢、明显的闪烁。似乎每个可能的选项都有自己独特的bug。我尝试切换到标签而不是标签，这似乎解决了渲染bug。这很好，但是，现在有一个新的bug。似乎标签是不可读取的。他们不会将点击事件传递给父母，这以一种新的方式破坏了导航。如果单击文本，它将工作，但图标不工作：使所有svg元素指针事件：无

$(function()
{
set_nav_bar("odo");

$("footer a").click(function($e)
    {
    $go_to = $(this).attr("id");
    set_nav_bar($go_to);
    $e.preventDefault();
    });

});

function set_nav_bar($go_to)
{
$("#odo img").attr("src","http://img.menulizard.com/odo.svg");
$("#gas img").attr("src","http://img.menulizard.com/gas.svg");
$("#yum img").attr("src","http://img.menulizard.com/yum.svg");
$("#bus img").attr("src","http://img.menulizard.com/bus.svg");
$("#set img").attr("src","http://img.menulizard.com/set.svg");
$("#odo,#gas,#yum,#bus,#set").css("color","");

$("#"+$go_to+" img").attr("src","http://img.menulizard.com/"+$go_to+".on.svg");
$("#"+$go_to).css("color","#0099ff");
}