本文介绍了SVG图像未在Firefox中加载的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是一个 codepen ，该问题的底部是实际代码.尽管代码在Chrome中可以正常运行，但出于某些原因，svg元素中的image元素未在Firefox中加载.我已经在Firefox版本64和64.0.2上对其进行了测试.都不加载图像.

Here is a codepen and at the bottom of this question is the actual code. Although the code works fine in Chrome, for some reason image elements in an svg element are not loading in Firefox. I've tested it on Firefox versions 64 and 64.0.2. Neither loads the images.

基于 SO答案，我遇到了文档本身，我尝试了许多不同的方法，但均无济于事.我尝试过的一些事情是...

Based on an SO answer I came across, and the documentation itself, I've tried a number of different things, none of which worked. Some of the things I've tried are...

<svg xmlns:xlink="http://www.w3.org/1999/xlink" ... >
<image xlink:href='...' href='...'

<svg xmlns:xlink="http://www.w3.org/1999/xlink" ... >
<image xlink:href='...' href='...'

这是Firefox的SVG实施的错误吗?我以前发现过Firefox的SVG实施的错误，所以我不会感到惊讶.

Is this a bug with Firefox's implementation of SVG? I've discovered bugs with Firefox's SVG implementation before, so I wouldn't be surprised.

<svg id='svg' viewBox='0 0 6144 4608' version='1.1'>
  <image x='0' y='0' preserveAspectRatio='none'
    xlink:href='https://i.postimg.cc/hvH4yn2Q/map.jpg'
    id='background-image' />
  <clipPath id='eye'>
    <rect id='rectangle' x='3172' y='2404' rx='10' ry='10' />
  </clipPath>
  <image x='0' y='0' preserveAspectRatio='none'
    xlink:href='https://i.postimg.cc/hvH4yn2Q/map.jpg'
    id='main-image'/>
</svg>

CSS

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

#svg {
  width: 6144px;
  height: 4608px;
  position: absolute;
  left: -3072px; /* set with JS */
  top: -2304px; /* set with JS */
}

#background-image {
  width: 6144px;
  height: 4608px;
  opacity: 0.25;
}

rect {
  width: 35vw;
  height: 75vh;
}

#main-image {
  width: 6144px;
  height: 4608px;
  clip-path: url(#eye);
}

1999

SVG图像未在Firefox中加载

问题描述

CSS

推荐答案