SVG 崩溃 Safari答案

【问题标题】：SVG crash SafariSVG 崩溃 Safari
【发布时间】：2012-12-22 14:19:04
【问题描述】：

我正在开发一个投资组合 (http://www.chloémorillon.com/) 网站，当我通过所有网络浏览器检查它时遇到了问题。它在 chrome 上运行良好，但是当我使用 Safari 进行检查时，浏览器会不断刷新页面，直到它确实崩溃。

我使用 SVG 来渲染平行六面体，所以我认为问题来自那里......

这是每个形状框的代码：

<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="485" width="305" class="svg-graphic">
         <filter id="grayscale">
              <feColorMatrix values="0" type="saturate"/>
         </filter>
         <g>
         <clipPath id="hex-mask">
         <polygon points="200, 0  200,284 0,384  0, 100"/>
         </clipPath>
         </g>
         <a xlink:href="http://xn--chlomorillon-eeb.com/projets/">
         <polygon transform="translate(2, 6)" points="200, 0  200,284 0,384  0, 100" stroke-width="10" stroke="#1a171b" fill="#1a171b"/>
         <polygon transform="translate(2, 6)" points="200, 0  200,284 0,384  0, 100" stroke-width="10" stroke="#75ffba" fill="#75ffba" id="bandw"/>
         <image preserveAspectRatio="xMidYMin slice" transform="translate(3, 6)" xlink:href="http://xn--chlomorillon-eeb.com/wp-content/themes/culotte/images/accueil1.jpg" width="100%" height="100%" clip-path="url(#hex-mask)" id="color"/>
        <image preserveAspectRatio="xMidYMin slice" transform="translate(3, 6)" xlink:href="http://xn--chlomorillon-eeb.com/wp-content/themes/culotte/images/accueil1.jpg" width="100%" height="100%" filter="url(#grayscale)" clip-path="url(#hex-mask)" id="bandw"/>
         </a>
     </svg>

你对我的问题有任何线索吗？

【问题讨论】：

它适用于我在 OS X 10.8.2 下的 Safari 6.0.2 中。
问题似乎出现在 Safari
过滤器仅适用于 Safari 6+
我在 Safari

标签： svg safari crash svg-filters

【解决方案1】：

只是一些一般性的调试帮助：当事情失败时，尝试删除代码，直到找到有问题的代码。我会先删除过滤器，因为 Safari 5 不支持 SVG 过滤器。这不应该导致崩溃（它应该只是忽略过滤器），但你永远不知道。

另一个可能的故障点是 utf-8 域 http://xn--chlomorillon-eeb.com，尝试相对路径（只是 <a xlink:href="/projets">）。

一旦您确定了导致崩溃的代码片段，您就可以设计一种解决方法，使用 javascript 或 Safari 5 的后备。

【讨论】：