SVG'yi ReactJS'ye gömme

127

SVG işaretlemesini bir ReactJS bileşenine gömmek mümkün mü?

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

Hataya neden olan sonuçlar:

Ad alanı nitelikleri desteklenmez. ReactJSX XML değildir.

Bunu yapmanın en hafif yolu nedir? React ART gibi bir şey kullanmak , yapmaya çalıştığım şey için çok fazla.

javascript svg reactjs

— nicholas
kaynak

1

Bir jsbin oluşturabilir misin? Açılış SVG etiketinizi sadece <svg id="Layer_1">(veya hatta daha iyisi, id olmadan) değiştirmek kadar basit olabilir . Düzenleme: işte bir örnek: jsbin.com/nifemuwi/2/edit?js,output

— Brigand

@FakeRainBrigand Teşekkürler! Bu durumda bu kadar basitti. Yine de Ben'in cevabına bakın. Gerektiğinde jsx çözümlemesini aşabileceğinizi bilmek güzel.

— Nicholas

178

2016-05-27 Güncellemesi

React v15'ten itibaren, React'te SVG desteği, SVG için mevcut tarayıcı desteğiyle ( kaynak ) % 100 eşittir (yaklaşık? ). HTML ( class→ className, style="color: purple"→ style={{color: 'purple'}}) için zaten yapmanız gerektiği gibi , JSX uyumlu hale getirmek için bazı sözdizimi dönüşümleri uygulamanız yeterlidir . İsim alanlı (iki nokta üst üste ile ayrılmış) öznitelik için, örneğin xlink:href, özniteliğin :ikinci bölümünü kaldırın ve büyük harfle yazın, ör xlinkHref. İşte bir ile svg bir örnek <defs>, <use>ve satır içi stilleri:

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

Çalışma codepen demosu

Özel destek hakkında daha fazla ayrıntı için, belgelerin desteklenen SVG öznitelikleri listesine bakın . Ve işte ad alanlı SVG öznitelikleri için desteği izleyen (artık kapalı) GitHub sorunu .

Önceki cevap

Yalnızca dangerouslySetInnerHTMLad alanı niteliklerini çıkararak kullanmak zorunda kalmadan basit bir SVG yerleştirmesi yapabilirsiniz . Örneğin, bu işe yarar:

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

Hangi noktada props eklemeyi fillveya yapılandırmak için yararlı olabilecek başka şeyleri düşünebilirsiniz.

— Andrew Patton
kaynak

@ChinonsoChukwuogor Harika soru! Bilmiyorum, React Native'i hiç kullanmadım. Denedin mi?

— Andrew Patton

@AndrewPatton Çoklu Css Sınıfı adları işaretli karakterle çalışmıyor: ' .class1, .class2{fill: #005baa;}' Bunu nasıl düzeltebilirim?

— HelloWorld

@HelloWorld Bana bunun işe yaramadığı bir örnek verebilir misiniz? Eklemek için orijinal demomu çatalladımclassB ve işe yaradı: codepen.io/acusti/pen/BVJzNg

— Andrew Patton

Teşekkürler, bundan başlayarak, herhangi bir yükleyici olmadan bir React bileşeni olarak dosyadan bir svg'yi içe aktarmayı başardım , az önce `` xmlns: osb = " openswatchbook.org/uri/2009/osb " '' öğesini kaldırdım svg etiketi, yalnızca xlmn'leri bırakarak. Görünüşe göre her şey etiket ayrıştırma ile ilgili. Her ihtimale karşı şu adımları da izledim

— Funder

56

Eklemek istediğiniz statik bir svg dizeniz varsa, şunları kullanabilirsiniz dangerouslySetInnerHTML:

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

ve React, işaretlemeyi hiç işlemeden doğrudan dahil edecektir.

— Sophie Alpert
kaynak

3

React kullanarak SVG içindeki bazı yolları kontrol ediyorum, ancak React filtre öğelerini desteklemiyor gibi görünüyor. Bunu desteklemenin bir yolu var mı? Bir SVG'nin içine bir yayılma alanı koyamadığım ve yollarda filtre özelliğini ayarlamak için bunu kullanamadığım için, dangerouslySetInnerHTML çalışmayacak gibi görünüyor. React öğelerini her zamanki gibi oluşturmanın bir yolu olduğunu sanmıyorum, ancak tüm öznitelikleri birebir DOM öğelerine aktarsınlar mı?

— Andy

2019 itibariyle, tehlikeli bir şekildeSetInnerHTML kullanabilirsiniz gibi görünüyor, ancak yine de, dangerouslySetInnerHTML kullanarak Chrome'da gölge filtresinin çalışmasını sağlayamadım, ancak Firefox'ta çalışıyor.

— Shnd

31

Bir react geliştiricisine göre xmlns ad alanına ihtiyacınız yoktur. Özniteliğe ihtiyacınız xlink:hrefvarsa, 0.14 tepkisinden xlinkHref kullanabilirsiniz.

Misal

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

— lastid
kaynak

12

Bir dosyadan yüklemek istiyorsanız, React-inlinesvg'yi kullanmayı deneyebilirsiniz - bu oldukça basit ve anlaşılır bir işlemdir .

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>

— Youkko
kaynak