반응 렌더링 SVG는 페이지의 다른 SVG를 덮어 씁니다.

응용 프로그램 내에서 babel-plugin-inline-react-svg을 사용하면 일부 SVG를 내 반응 v16.0.0 구성 요소로 가져옵니다. 내가 그 코드를 실행하면반응 렌더링 SVG는 페이지의 다른 SVG를 덮어 씁니다.

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 SVGs 모든 것을 같은 렌더링됩니다 :

어느 쪽을 내가 렌더링 SVGs의 첫 온통 걸릴 것 같다 다른 것들 중. <EmptyCart />을 먼저 넣으면 모두 카트 아이콘이됩니다. 그러나 여기에 진정한 키커가 있습니다. DOM을 검사 할 때 SVG는 모두 정확합니다 (모두 완전히 다릅니다).

누구나 전에 본적이 있습니까? DOM이 한 가지를 말하고 브라우저가 다른 것을 표현할 수있는 방법은 무엇입니까?

출처

2017-11-17 dargue3

오른쪽 빈, 가까이 무엇? –

' dargue3

그들은 id 값을 공유합니까? 즉, 하나 이상의 파일에 id = "a"또는 id = "b" –

다른 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"/>

때 충돌을 피하기 위해 포토샵 등과 같은 응용 프로그램에서 내보낼 때 특히, 일반적인 문제입니다 svg를 사용하십시오. 고유성을 보장하기 위해 모든 ID를 수동으로 변경합니다. 도움이된다면

, 나는 다시 사용하는 방법에 대한 더 많은 예제 SVG 년대로가는 코드 펜을 만들었습니다 https://codepen.io/peter-mouland/pen/JErvZY

출처

2017-12-28 15:06:30

반응 렌더링 SVG는 페이지의 다른 SVG를 덮어 씁니다.

답변

관련 문제