Question

我希望有一些解决方案可以解决我遇到的这个问题。它的本质是.svg图像将以适当大小的一小部分随机渲染。几年前我犯了很多这个错误，但它似乎已被清理干净了。然而，我正在努力的网站现在很难找到这个bug。由于它是一个主要用于iPhone的移动网站，因此它必须在Mobile Safari中正常运行。

以下是jsFiddle的链接：http://jsfiddle.net/op3u6uam/3/

如果单击渲染代码结果底部的不同“按钮”，它们应该变为蓝色。我用css更改了文本，并通过将src属性与另一个图像（蓝色图像）交换来更改图像。很简单。但是对于SVG，交换的图像有时会搞砸。该错误也发生在桌面Safari上，因此您只需单击链接即可查看它。

我希望有一些方法可以绕过这个bug。除了切换到光栅图像之外的其他东西。矢量图像具有许多奇妙的特性，包括微小的尺寸，这在使用具有较差蜂窝连接的应用程序时非常棒。

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

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>

CSS：

footer
{
position: fixed;
width: 100%;
bottom: 0px;
text-align: center;
border-top: solid 1px #cccccc;
}

footer a { display: block; }

footer li
    {
    display: inline-block;
    width: 20%;
    font-size: .8em;
    }

footer img
    {
    fill: blue;
    height: 24px; width: 24px;
    display: block;
    padding: 3px 0px;
    margin: 0 auto;
    }

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");
}

在Safari中使用SVG渲染Bug的解决方案？

0 个答案: