反射渲染SVG会覆盖页面上的其他SVG

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了反射渲染SVG会覆盖页面上的其他SVG相关的知识,希望对你有一定的参考价值。

在我的babel-plugin-inline-react-svg应用程序中使用next.js,我将一些SVG导入到我的React v16.0.0组件中。

import React from 'react';
import Close from './close.svg';
import Chevron from './right.svg';
import EmptyCart from './empty.svg';

const Component = props => (
  <div>
    <Close />
    <EmptyCart />
    <Chevron />
  </div>
);

当我运行该代码时,页面呈现的3个SVG都是相同的,如下所示:

duplicated SVGs

我首先渲染的SVG似乎接管了所有其他SVG。如果我把<EmptyCart />放在第一位,它们都将是购物车图标。但这是真正的踢球者:当我检查DOM时,SVG似乎都是正确的(它们彼此完全不同)。

有人见过这个吗?除了浏览器渲染另一件事之外,DOM怎么可能说一件事呢?

答案

看到其他SVG也会有所帮助,但如果它们相似且id匹配,那么这就是你的问题。

    <path id="4eeded6c-befb-41ba-a055-83a9e4ddc009" d="M3.632 3.182H1.091A1.09 1.09 0 0 1 1.09 1h3.322c.467 0 .883.297 1.033.74l4.096 12.046.036.134c.083.406.53.777.928.78l8.87.056c.39.002.831-.361.925-.816l1.552-6.017a1.09 1.09 0 1 1 2.112.545l-1.539 5.96c-.285 1.417-1.625 2.518-3.064 2.51l-8.869-.057c-1.408-.008-2.718-1.073-3.036-2.451L3.632 3.182zM9.272 23a2.191 2.191 0 0 1-2.181-2.201c0-1.216.977-2.2 2.182-2.2s2.181.984 2.181 2.2A2.191 2.191 0 0 1 9.273 23zm10.91 0A2.191 2.191 0 0 1 18 20.799c0-1.216.977-2.2 2.182-2.2s2.181.984 2.181 2.2A2.191 2.191 0 0 1 20.182 23z"/>

你可以看到这个id在SVG中被定位并重用:

    <use xlink:href="#4eeded6c-befb-41ba-a055-83a9e4ddc009"/>

这是一个常见的问题,尤其是从photoshop等应用程序导出时。为了避免在使用svg时出现冲突,我手动更改所有ID以确保唯一性。

如果它有帮助,我已经创建了一个代码笔,它将介绍如何重用svg的更多示例:https://codepen.io/peter-mouland/pen/JErvZY

另一答案

您应该为配置文件中的每个svg图标分配不同的ID。像这样:

// SVG are imported as react components
  {
    test: /.svg$/,
    use: [
      {
        loader: 'babel-loader',
      },
      {
        loader: 'react-svg-loader',
        options: {
          svgo: {
            plugins: [
              {
                removeTitle: true,
              },
              {cleanupIDs: {
                  prefix: {
                      toString() {
                          this.counter = this.counter || 0;

                          return `id-${this.counter++}`;
                      }
                  }
              }},
            ],
            floatPrecision: 3,
          },
        },
      },
    ],
    include: paths.svg,
  },
另一答案

该问题可能与SVG中的非唯一ID有关。

svg生成器通常可以返回具有相同ID的内容,如<mask id="mask0" />,然后由<g mask="url(#mask0)"/>引用。

如果您有两个具有相同掩码ID的不同SVG,则可能会出现渲染两个不同图标的问题。

最简单的解决方案是为每个<mask />指定一个唯一的id,然后不要忘记更新<g />中的引用。

另一答案

如上所述,问题很可能是SV在SVG之间不是唯一的。有些加载器可以自动处理这个问题,因此您不必手动更改所有ID和对它们的引用。看看这个:https://github.com/SilverFox70/svg-react-loader

以上是关于反射渲染SVG会覆盖页面上的其他SVG的主要内容,如果未能解决你的问题,请参考以下文章

CSS 过渡属性覆盖 SVG 元素上的 jQuery 动画时间

Chrome 不渲染通过 <img> 元素引用的 SVG

在 HTML 页面上从 SVG 文件渲染图标

SVG 文件不会在 React Native 上同时渲染

如何制作拉伸而不是平铺的 SVG 背景?

使用promises将多个svg字符串流式传输到nodejs中的png