การฝัง SVG ลงใน ReactJS

เป็นไปได้ไหมที่จะฝังมาร์กอัป 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

วิธีที่เบาที่สุดในการทำคืออะไร การใช้บางอย่างเช่นReact ARTเป็นวิธีที่มากเกินไปสำหรับสิ่งที่ฉันพยายามทำ

ปรับปรุง 2016-05-27

สำหรับ React v15 การสนับสนุน SVG ใน React นั้น (ใกล้เคียงกับ?) 100% เทียบเท่ากับเบราว์เซอร์ปัจจุบันที่รองรับ SVG ( แหล่งที่มา ) คุณเพียงแค่ต้องใช้การแปลงรูปแบบไวยากรณ์เพื่อให้เข้ากันได้กับ JSX เช่นเดียวกับที่คุณต้องทำกับ HTML ( class→ className, style="color: purple"→ style={{color: 'purple'}}) สำหรับแอตทริบิวต์ใด ๆ namespaced (ลำไส้ใหญ่แยก) เช่น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 เนมสเปซ

คำตอบก่อนหน้า

คุณสามารถทำการฝัง SVG แบบง่ายๆได้โดยไม่ต้องใช้dangerouslySetInnerHTMLเพียงแค่ลอกแอตทริบิวต์เนมสเปซ ตัวอย่างเช่นการทำงานนี้:

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

เมื่อถึงจุดนั้นคุณสามารถคิดเกี่ยวกับการเพิ่มอุปกรณ์ประกอบฉากเช่นfillหรือสิ่งอื่นใดที่อาจเป็นประโยชน์ในการกำหนดค่า

หากคุณมีสตริง svg แบบคงที่ที่คุณต้องการรวมคุณสามารถใช้dangerouslySetInnerHTML:

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

และ React จะรวมมาร์กอัปโดยตรงโดยไม่ต้องประมวลผลเลย

ตามที่นักพัฒนาตอบสนองคุณไม่จำเป็นต้องมี xmlns เนมสเปซ หากคุณต้องการแอตทริบิวต์xlink:hrefคุณสามารถใช้ xlinkHref จาก react 0.14

ตัวอย่าง

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

หากคุณต้องการโหลดจากไฟล์คุณอาจลองใช้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>