Nhúng SVG vào ReactJS

Có thể nhúng đánh dấu SVG vào thành phần ReactJS không?

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

Kết quả là lỗi:

Thuộc tính không gian tên không được hỗ trợ. ReactJSX không phải là XML.

Cách nhẹ nhất để làm điều này là gì. Sử dụng một cái gì đó như React ART là quá mức cần thiết cho những gì tôi đang cố gắng làm.

Cập nhật 2016-05-27

Kể từ React v15, hỗ trợ cho SVG trong React là (gần bằng?) Chẵn lẻ 100% với hỗ trợ trình duyệt hiện tại cho SVG ( nguồn ). Bạn chỉ cần áp dụng một số chuyển đổi cú pháp để làm cho nó tương thích với JSX, giống như bạn đã phải làm với HTML ( class→ className, style="color: purple"→ style={{color: 'purple'}}). Đối với bất kỳ namespaced thuộc tính (dấu hai chấm-tách ra), ví dụ xlink:href, hãy tháo :và tận dụng phần thứ hai của thuộc tính, ví dụ xlinkHref. Dưới đây là một ví dụ về một svg với <defs>, <use>và phong cách nội tuyến:

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

Bản demo làm việc

Để biết thêm chi tiết về hỗ trợ cụ thể, hãy kiểm tra danh sách các thuộc tính SVG được hỗ trợ của tài liệu . Và đây là vấn đề GitHub (hiện đã đóng) đã theo dõi hỗ trợ cho các thuộc tính SVG được đặt tên.

Câu trả lời trước

Bạn có thể thực hiện một nhúng SVG đơn giản mà không cần phải sử dụng dangerouslySetInnerHTMLbằng cách chỉ tước các thuộc tính không gian tên. Ví dụ, điều này hoạt động:

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

Tại thời điểm nào bạn có thể nghĩ về việc thêm các đạo cụ như fill, hoặc bất cứ điều gì khác có thể hữu ích để cấu hình.

Nếu bạn chỉ có một chuỗi svg tĩnh bạn muốn đưa vào, bạn có thể sử dụng dangerouslySetInnerHTML:

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

và React sẽ bao gồm đánh dấu trực tiếp mà không xử lý nó.

Theo một nhà phát triển phản ứng , bạn không cần xmlns không gian tên. Nếu bạn cần thuộc tính, xlink:hrefbạn có thể sử dụng xlinkHref từ phản ứng 0.14

Thí dụ

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

Nếu bạn muốn tải nó từ một tệp, bạn có thể thử sử dụng React-inlinesvg - điều đó khá đơn giản và dễ hiểu.

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>