ReactJS

Question

में एसवीजी एम्बेड करना एसएसीजी मार्कअप को एक ReactJS घटक में एम्बेड करना संभव है? त्रुटि में

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

परिणाम:

Namespace attributes are not supported. ReactJSX is not XML.

क्या ऐसा करने का सबसे हल्का तरीका है। React ART जैसे कुछ का उपयोग करना जो मैं करने की कोशिश कर रहा हूं उसके लिए रास्ता अधिक है।

Answer 1

अद्यतन 2016-05-27

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

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> 
    ); 
} 

Working codepen demo

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

---

पिछला जवाब

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

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

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

Answer 2

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

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

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

Answer 3

According to a react developer, आपको नेमस्पेस xmlns की आवश्यकता नहीं है। आप xlinkHref उपयोग कर सकते हैं आप विशेषता xlink:href की जरूरत है प्रतिक्रिया 0.14

उदाहरण

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

Answer 4

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