SVG图像未在Firefox中加载 [英] SVG Image Not Loading in 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...

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

1. <svg xmlns:xlink="http://www.w3.org/1999/xlink" ... >
2. <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);
}

推荐答案

width和height属性

<svg id='svg' viewBox='0 0 6144 4608' version='1.1'>
  <image x='0' y='0' width="100%"; height="100%" 
    xlink:href='https://i.postimg.cc/hvH4yn2Q/map.jpg'
    />
</svg>

这篇关于SVG图像未在Firefox中加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！