svg - Microsoft Edge 不会渲染此 SVG

Question

我花了几个小时试图找出为什么我的网站无法在新的 Edge 浏览器中运行，我已将其范围缩小到 SVG 图像。网站上还有许多其他 SVG 图像，但这一特定图像会导致页面无法呈现。

任何人都可以看到此文件可能会导致 MS Edge 问题吗？

http://codepen.io/MERWIN/pen/BNeGYg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2257 613"><defs><clipPath id="Q"><path d="m9-1h13v-13h-13v13"/></clipPath><clipPath id="P"><path d="m-15 15h30v-23h-30v23"/></clipPath><clipPath id="8"><path d="m46.597 44.998c-1.159 0-2.1.94-2.1 2.102 0 1.158.941 2.097 2.1 2.097 1.16 0 2.1-.939 2.1-2.097 0-1.162-.94-2.102-2.1-2.102m-28 0c-1.16 0-2.101.94-2.101 2.102 0 1.158.941 2.097 2.101 2.097 1.159 0 2.099-.939 2.099-2.097 0-1.162-.94-2.102-2.099-2.102m34 9.1h-40c-2.209 0-4-1.791-4-4v-35c0-2.209 1.791-4 4-4h32l12 12v27c0 2.209-1.791 4-4 4"/></clipPath><clipPath id="J"><path d="m13.802 25.598h19.547v-18h-19.547v18"/></clipPath><clipPath id="L"><path d="m22.507 57.6h10.09v-25.07h-10.09v25.07"/></clipPath><clipPath id="M"><path d="m0 64h64v-64h-64v64"/></clipPath><clipPath id="K"><path d="m37.01 32.529h24.59v-6.932h-24.59v6.932"/></clipPath><clipPath id="N"><path d="m-32 32h64v-64h-64v64"/></clipPath><clipPath id="3"><path d="m5.599 52.1h54v-39h-54v39"/></clipPath><clipPath id="4"><path d="m55.6 52.1h-46c-2.209 0-4-1.791-4-4v-31c0-2.209 1.791-4 4-4h46c2.209 0 4 1.791 4 4v31c0 2.209-1.791 4-4 4"/></clipPath><clipPath id="2"><path d="m32.599 46.32h27v-33.22h-27v33.22"/></clipPath><clipPath id="0"><path d="m0 65.2h65.2v-65.2h-65.2v65.2"/></clipPath><clipPath id="1"><path d="m11.599 28.1h21v-15h-21v15"/></clipPath><clipPath id="7"><path d="m8.597 54.1h48v-43h-48v43"/></clipPath><clipPath id="6"><path d="m32.597 23.1h12v-12h-12v12"/></clipPath><mask id="9"><path d="m-32768 32767h65535v-65535h-65535v65535" fill="url(#A)"/></mask><mask id="E"><path d="m-32768 32767h65535v-65535h-65535v65535" fill="url(#F)"/></mask><radialGradient cx="0" cy="0" r="1" id="W" xlink:href="#H" gradientUnits="userSpaceOnUse" gradientTransform="matrix(12.84125-12.81488-12.82329-12.80934 37.843 16.508)"/><radialGradient cx="0" cy="0" r="1" id="T" xlink:href="#C" gradientUnits="userSpaceOnUse" gradientTransform="matrix(47.85388-36.77136-36.77136-47.85388 9.697 52.04)"/><radialGradient cx="0" cy="0" r="1" id="V" xlink:href="#G" gradientUnits="userSpaceOnUse" gradientTransform="matrix(12.7184-12.69228-12.7006-12.68679 18.15 32.597)"/><radialGradient cx="0" cy="0" r="1" id="U" xlink:href="#D" gradientUnits="userSpaceOnUse" gradientTransform="matrix(53.90006-38.59975-38.59975-53.90006 5.799 51.897)"/><radialGradient cx="0" cy="0" r="1" id="S" xlink:href="#B" gradientUnits="userSpaceOnUse" gradientTransform="matrix(47.87513-43.0001-43.0001-47.87513 8.784 54.04)"/><radialGradient cx="0" cy="0" r="1" id="X" xlink:href="#I" gradientUnits="userSpaceOnUse" gradientTransform="matrix(14.38227-14.35309-14.3625-14.34653 42 41.519)"/><radialGradient cx="0" cy="0" r="1" id="R" xlink:href="#5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(47.87513-43.0001-43.0001-47.87513 8.784 54.04)"/><radialGradient cx="0" cy="0" r="1" id="H" gradientUnits="userSpaceOnUse" gradientTransform="matrix(12.84125-12.81488-12.82329-12.80934 37.843 16.508)" xlink:href="#5"/><radialGradient cx="0" cy="0" r="1" id="O" gradientUnits="userSpaceOnUse" gradientTransform="matrix(51.77757 51.77757-51.77757 51.77757-5.558 4.245)"><stop stop-color="#0da960"/><stop offset="1" stop-color="#03914b"/></radialGradient><radialGradient cx="0" cy="0" r="1" id="B" gradientUnits="userSpaceOnUse" gradientTransform="matrix(47.87513-43.0001-43.0001-47.87513 8.784 54.04)"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff"/></radialGradient><radialGradient cx="0" cy="0" r="1" id="5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(47.87513-43.0001-43.0001-47.87513 8.784 54.04)"><stop stop-color="#4387fd"/><stop offset=".65" stop-color="#3078f0"/><stop offset="1" stop-color="#286ee6"/></radialGradient><radialGradient cx="0" cy="0" r="1" id="A" gradientUnits="userSpaceOnUse" gradientTransform="matrix(47.87513-43.0001-43.0001-47.87513 8.784 54.04)"><stop stop-color="#fff" stop-opacity=".1"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient><radialGradient cx="0" cy="0" r="1" id="C" gradientUnits="userSpaceOnUse" gradientTransform="matrix(47.85388-36.77136-36.77136-47.85388 9.697 52.04)"><stop stop-color="#fdfcf5"/><stop offset=".65" stop-color="#e4e1d1"/><stop offset="1" stop-color="#d0cec1"/></radialGradient><radialGradient cx="0" cy="0" r="1" id="I" gradientUnits="userSpaceOnUse" gradientTransform="matrix(14.38227-14.35309-14.3625-14.34653 42 41.519)"><stop stop-color="#ffd24d"/><stop offset="1" stop-color="#f6c338"/></radialGradient><radialGradient cx="0" cy="0" r="1" id="D" gradientUnits="userSpaceOnUse" gradientTransform="matrix(53.90006-38.59975-38.59975-53.90006 5.799 51.897)"><stop stop-color="#e04a3f"/><stop offset="1" stop-color="#d63e30"/></radialGradient><radialGradient cx="0" cy="0" r="1" id="Y" xlink:href="#O" gradientUnits="userSpaceOnUse" gradientTransform="matrix(51.77757 51.77757-51.77757 51.77757-5.558 4.245)"/><radialGradient cx="0" cy="0" r="1" id="F" gradientUnits="userSpaceOnUse" gradientTransform="matrix(53.0105-39.79906-39.79906-53.0105 5.654 52.1)" xlink:href="#A"/><radialGradient cx="0" cy="0" r="1" id="G" gradientUnits="userSpaceOnUse" gradientTransform="matrix(12.7184-12.69228-12.7006-12.68679 18.15 32.597)"><stop stop-color="#0da960"/><stop offset="1" stop-color="#069b5a"/></radialGradient></defs><g transform="translate(100)"><g transform="matrix(9.30226 0 0-9.30226 568.03 616.23)"><path d="m12.596 54.1c-2.208 0-3.999-1.792-3.999-4v-35c0-2.209 1.791-4 3.999-4h32l4.998 7 7 4.998v27c0 2.208-1.791 4-3.999 4h-40m31.901-6.998c0 1.158.94 2.098 2.1 2.098 1.16 0 2.1-.94 2.1-2.098 0-1.162-.94-2.102-2.1-2.102-1.16 0-2.1.94-2.1 2.102m-28 0c0 1.158.941 2.098 2.101 2.098 1.159 0 2.099-.94 2.099-2.098 0-1.162-.94-2.102-2.099-2.102-1.16 0-2.101.94-2.101 2.102" fill="url(#R)"/><g clip-path="url(#0)"><path d="m0 0v-2.203h5.125v-16.516h2.875v22h-2.229c-.826-2.523-3.165-3.244-5.771-3.281" fill="#f2f2f2" transform="translate(36.597 37.816)"/><g clip-path="url(#6)" fill-opacity=".228"><path d="m44.597 23.1v-12h-12l12 12" fill-opacity=".228"/></g><path d="m0 0v12h12l-12-12" fill="#a0c3ff" transform="translate(44.597 11.1)"/><path d="m0 0v.061c1.646.763 2.99 2.41 2.99 4.302 0 3.998-2.838 5.799-6.592 5.799-4.275 0-6.466-2.797-6.671-6.828h2.593c.082 2.461 1.302 4.539 4.078 4.539 2.199 0 3.845-1.219 3.845-3.48 0-2.35-1.923-3.538-4.118-3.538-.367 0-.734 0-1.13.03v-2.196c.488.061 1.037.09 1.556.09 2.562 0 4.608-1.433 4.608-4.148 0-2.625-2.166-4.182-4.698-4.182-2.883 0-4.424 1.86-4.588 4.547h-2.61c.006-4.32 2.875-6.834 7.198-6.834 4.058 0 7.443 2.256 7.443 6.59 0 2.594-1.281 4.668-3.904 5.248" fill="#f2f2f2" transform="translate(29.692 30.936)"/><g clip-path="url(#7)"><g clip-path="url(#8)"><g mask="url(#9)"><path d="m46.597 44.998c-1.159 0-2.1.94-2.1 2.102 0 1.158.941 2.097 2.1 2.097 1.16 0 2.1-.939 2.1-2.097 0-1.162-.94-2.102-2.1-2.102m-28 0c-1.16 0-2.101.94-2.101 2.102 0 1.158.941 2.097 2.101 2.097 1.159 0 2.099-.939 2.099-2.097 0-1.162-.94-2.102-2.099-2.102m34 9.1h-40c-2.209 0-4-1.791-4-4v-35c0-2.209 1.791-4 4-4h32l12 12v27c0 2.209-1.791 4-4 4" fill="url(#S)"/></g></g></g></g></g><g transform="matrix(10.25633 0 0-10.25633-57.43 647.33)"><path d="m55.6 52.1h-46l2-39h42l2 39" fill="url(#T)"/><g clip-path="url(#0)"><g clip-path="url(#1)"><path d="m0 0l-21-14v1l21 14v-1" fill="#d1d1d1" transform="translate(32.599 27.1)"/></g></g><path d="m32.599 35.598l-23 16.499c-2.208 0-3.999-1.791-3.999-3.999v-31c0-2.208 1.791-3.999 3.999-3.999h2v29l21-15 21 15v-29h1.999c2.21 0 4 1.791 4 3.999v31c0 2.208-1.791 3.999-4 3.999l-22.999-16.499" fill="url(#U)"/><g clip-path="url(#0)" fill-opacity=".196"><g clip-path="url(#2)" opacity=".8"><path d="m32.599 27.1l21-14h2c2.209 0 4 1.791 4 4v29.22l-27-19.222" fill-opacity=".196"/></g><g clip-path="url(#3)"><g clip-path="url(#4)" fill-opacity=".196"><g mask="url(#E)" fill-opacity=".196"><path d="m55.6 52.1h-46c-2.209 0-4-1.791-4-4v-31c0-2.209 1.791-4 4-4h46c2.209 0 4 1.791 4 4v31c0 2.209-1.791 4-4 4" fill-opacity=".196"/></g></g></g></g></g><g transform="matrix(8 0 0-8 1151.7 573.78)"><path d="m13.786 7.598l-10.187 17.306 18.908 32.694 10.09-17.442-18.813-32.558" fill="url(#V)"/><path d="m13.776 7.598l10.422 18h37.4l-10-18h-37.823" fill="url(#W)"/><path d="m61.6 25.598h-20.551l-18.547 32h20.19l18.911-32" fill="url(#X)"/><g clip-path="url(#J)" fill-opacity=".199"><path d="m33.35 25.598h-9.157l-10.39-18 19.547 18" fill-opacity=".199"/></g><g fill-opacity=".199"><g clip-path="url(#K)"><path d="m41.05 25.613l20.547-.015-24.59 6.931 4.04-6.916" fill-opacity=".199"/></g><g clip-path="url(#L)"><path d="m28.19 32.529l4.411 7.627-10.09 17.442 5.681-25.07" fill-opacity=".199"/></g></g></g><g transform="matrix(7.40741 0 0-7.40741 1656.75 550.04)" clip-path="url(#M)"><g clip-path="url(#N)" transform="matrix(1 0 0-1 32 32)"><path d="m22-14h-13v-13h-26.547c-2.459 0-4.453 1.994-4.453 4.453v45.05c0 2.459 2.041 4.5 4.5 4.5h35c2.5 0 4.5-2 4.5-4.5v-36.5" fill="url(#Y)"/><g clip-path="url(#P)" opacity=".9"><path d="m13-1h-17v-5h17v5m0 7h-17v-5h17v5m0 7h-17v-5h17v5m-26-5h7v5h-7v-5m0-7h7v5h-7v-5m0-7h7v5h-7v-5m-2-2v1.709.291 5 2 5 2 5 1.843.157h30v-.99-1.01-5-2-5-2-5-.291-1.709h-30" fill="#fff"/></g><g clip-path="url(#Q)" fill-opacity=".196"><path d="m9-14h13v13l-13-13" fill-opacity=".196"/></g><path d="m0 0h-13v-13l13 13" fill="#7bcfa9" transform="translate(22-14)"/></g></g></g></svg>

在 Edge 中查看上述 Codepen 页面也会重现该问题。

更新: 运行 Windows 10 和 MS Edge 的其他计算机似乎可以很好地渲染有问题的图像。也许这是我的硬件的错误？我有配备 2560x1440 触摸屏的 Lenovo Carobon X1。

如果其他人可以使用 MS Edge 查看上面的链接，并让我知道图像是否可以渲染，我们将不胜感激!

Answer 1

Viewing the above Codepen page in Edge will also replicate the issue.

不，不会。 Edge 中的外观与 Firefox 中的外观相同。

测试http://wordpress.dev.cloudsmith.ca/在边缘