☰

React レンダリング SVG がページ上の他の SVG を上書きする 質問する

tag-icon • tag-icon reactjs svg next.js inline-svg
React レンダリング 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 がすべて同じ状態でレンダリングされます。

重複したSVG

最初にレンダリングした SVG は、他のすべての SVG を上書きするようです。<EmptyCart />最初に配置すると、すべてカート アイコンになります。しかし、ここで重要な点があります。DOM を検査すると、SVG はすべて正しいようです (すべて互いに完全に異なります)。

誰かこれを見たことがありますか? DOM が 1 つのことを伝え、ブラウザが別のものをレンダリングするというのは、いったいどうして可能なのでしょうか?

ベストアンサー1

他の 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 より

おすすめ記事