Question

我正在开发一个投资组合（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>

你对我的问题有任何疑问吗？

Answer 1

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

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

一旦确定导致崩溃的代码段，您就可以设计一个变通方法，使用javascript或Safari 5的后备。

SVG崩溃Safari

1 个答案: