ReactJS में एसवीजी एम्बेड करना

Question

क्या SVG मार्कअप को एक ReactJS घटक में एम्बेड करना संभव है?

render: function() {
  return (
    <span>
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmln ...
    </span>
  );
}

त्रुटि में परिणाम:

Namespace विशेषताएँ समर्थित नहीं हैं। ReactJSX XML नहीं है।

ऐसा करने का सबसे हल्का तरीका क्या है। रिएक्ट एआरटी की तरह कुछ का उपयोग करना मैं क्या करने की कोशिश कर रहा हूँ के लिए ओवरकिल है।

Comments

क्या आप एक jsbin बना सकते हैं? यह आपके एसवीजी टैग को केवल <svg id="Layer_1">(या आईडी के बिना भी बेहतर) में बदलने के रूप में सरल हो सकता है । : संपादित करें: यहाँ एक उदाहरण है jsbin.com/nifemuwi/2/edit?js,output

— बटमार

@FakeRainBrigand धन्यवाद! इस मामले में यह इतना आसान था। हालांकि बेन के जवाब को देखो। यह जानना अच्छा है कि आपको आवश्यकता पड़ने पर jsx पार्सिंग के आसपास मिल सकता है।

— निकोलस

Answer 1

अपडेट 2016-05-27

React v15 के रूप में, प्रतिक्रिया में SVG के लिए समर्थन (करीब है?) SVG ( स्रोत ) के लिए वर्तमान ब्राउज़र समर्थन के साथ 100% समता है । आपको इसे JSX के अनुकूल बनाने के लिए बस कुछ सिंटेक्स ट्रांसफ़ॉर्मेशन लागू करने की आवश्यकता है, जैसे कि आपको पहले से ही HTML ( class→ className, style="color: purple"→ style={{color: 'purple'}}) के लिए करना है। किसी भी नामांकित (कोलन-सेपरेटेड) विशेषता के लिए, उदाहरण xlink:hrefके लिए, :और विशेषता के दूसरे भाग को कैपिटलाइज़ करें, जैसे xlinkHref। यहाँ के साथ एक svg का एक उदाहरण है <defs>, <use>और इनलाइन शैलियों:

function SvgWithXlink (props) {
    return (
        <svg
            width="100%"
            height="100%"
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
        >
            <style>
                { `.classA { fill:${props.fill} }` }
            </style>
            <defs>
                <g id="Port">
                    <circle style={{fill:'inherit'}} r="10"/>
                </g>
            </defs>

            <text y="15">black</text>
            <use x="70" y="10" xlinkHref="#Port" />
            <text y="35">{ props.fill }</text>
            <use x="70" y="30" xlinkHref="#Port" className="classA"/>
            <text y="55">blue</text>
            <use x="0" y="50" xlinkHref="#Port" style={{fill:'blue'}}/>
        </svg>
    );
}

वर्किंग कोडपेन डेमो

विशिष्ट समर्थन के बारे में अधिक जानकारी के लिए, समर्थित SVG विशेषताओं की डॉक्स सूची देखें । और यहाँ (अब बंद) GitHub मुद्दा है जो नामांकित SVG विशेषताओं के समर्थन को ट्रैक करता है।

---

पिछला उत्तर

आप dangerouslySetInnerHTMLकेवल नामस्थान विशेषताओं को अलग करके उपयोग किए बिना एक सरल एसवीजी एम्बेड कर सकते हैं । उदाहरण के लिए, यह काम करता है:

        render: function() {
            return (
                <svg viewBox="0 0 120 120">
                    <circle cx="60" cy="60" r="50"/>
                </svg>
            );
        }

जिस बिंदु पर आप प्रॉपर जोड़ने के बारे में सोच सकते हैं fill, या जो कुछ भी कॉन्फ़िगर करने के लिए उपयोगी हो सकता है।

Comments

@ChinonsoChukwuogor बढ़िया सवाल! मुझे नहीं पता, मैंने कभी भी रिएक्ट नेटिव का इस्तेमाल नहीं किया है। क्या आपने इसे जाने दिया?

— एंड्रयू पैटन

@AndrewPatton मल्टीपल सीएसएस क्लास टिक टिक के साथ काम नहीं करता है: ' .class1, .class2{fill: #005baa;}' मैं इसे कैसे ठीक कर सकता हूं?

— हेलोवर्ल्ड

@ हेलोवर्ल्ड क्या आप मुझे एक उदाहरण दे सकते हैं जहां यह काम नहीं करता है? मैंने सिर्फ जोड़ने के लिए अपने मूल डेमो को फोर्क classBकिया और यह काम किया: codepen.io/acusti/pen/BVJzNg

— एंड्रयू पैटन

धन्यवाद, इससे शुरू होकर मैं बिना किसी लोडर के रिएक्ट घटक के रूप में फ़ाइल से एक svg आयात करने में कामयाब रहा, मैंने अभी `` xmlns: osb = " openwatchbook.org/uri/2009/osb " `` svg टैग, केवल xlmns को छोड़कर। यह स्पष्ट रूप से टैगिंग पार्सिंग के बारे में है। बस के मामले में, मैंने इन चरणों का पालन किया है: blog.logrocket.com/how-to-use-svgs-in-react

— Funder

Answer 2

यदि आपके पास बस एक स्थैतिक svg स्ट्रिंग है जिसे आप शामिल करना चाहते हैं, तो आप इसका उपयोग कर सकते हैं dangerouslySetInnerHTML:

render: function() {
    return <span dangerouslySetInnerHTML={{__html: "<svg>...</svg>"}} />;
}

और प्रतिक्रिया में मार्कअप को सीधे शामिल किया जाएगा, इसे बिल्कुल संसाधित किए बिना।

Comments

मैं एसवीजी के अंदर कुछ रास्तों को रिएक्ट का उपयोग करके नियंत्रित कर रहा हूं, लेकिन रिएक्ट फिल्टर तत्वों का समर्थन नहीं करता है। क्या इसका समर्थन करने का कोई तरीका है? खतरनाक तरीके से लगता है जैसे InnerHTML काम नहीं करेगा क्योंकि मैं एक SVG के अंदर एक स्पैन नहीं डाल सकता और मैं इसका उपयोग पथ पर फ़िल्टर विशेषता को सेट करने के लिए नहीं कर सकता। मुझे नहीं लगता कि हमेशा की तरह रिएक्ट तत्वों को बनाने का एक तरीका है, लेकिन क्या उन्होंने डोम तत्वों को सभी विशेषताओं को शब्दशः पास कर दिया है?

— एंडी

2019 के अनुसार, ऐसा लगता है कि आप खतरनाक तरीके से इनस्टेनर HTML का उपयोग कर सकते हैं, लेकिन फिर भी मैं क्रोम पर खतरनाक तरीके से काम करने के लिए शैडो फिल्टर नहीं बना सका, लेकिन यह फ़ायरफ़ॉक्स पर काम कर रहा है।

— Shnd

Answer 3

एक प्रतिक्रिया डेवलपर के अनुसार , आपको नामस्थान xmlns की आवश्यकता नहीं है। यदि आपको विशेषता की आवश्यकता है तो आप xlink:hrefप्रतिक्रिया 0.14 से xlinkHref का उपयोग कर सकते हैं

उदाहरण

Icon = (props) => {
  return <svg className="icon">
    <use xlinkHref={ '#' + props.name }></use>
  </svg>;
}

Answer 4

यदि आप इसे किसी फ़ाइल से लोड करना चाहते हैं, तो आप React-inlinesvg का उपयोग करने का प्रयास कर सकते हैं - यह बहुत सरल और सीधे-आगे है।

import SVG from 'react-inlinesvg';

<SVG
  src="/path/to/myfile.svg"
  preloader={<Loader />}
  onLoad={(src) => {
    myOnLoadHandler(src);
  }}
>
  Here's some optional content for browsers that don't support XHR or inline
  SVGs. You can use other React components here too. Here, I'll show you.
  <img src="/path/to/myfile.png" />
</SVG>