React: SVG टैग और विशेषताएँ गुम हैं

को निर्मित 8 जून 2014 · 107टिप्पणियाँ · स्रोत: facebook/react

अनुरक्षकों से नोट: रिएक्ट 15 से शुरू होकर, हमें एसवीजी विनिर्देशों के सबसेट का पूरा समर्थन होना चाहिए जो वास्तव में ब्राउज़रों द्वारा कार्यान्वित किया जाता है।

यदि आपको कोई अनुपलब्ध विशेषता मिलती है, या यदि कोई टैग ठीक से काम नहीं करता है, तो कृपया नीचे एक टिप्पणी लिखें। ध्यान दें कि React.DOM.* फ़ैक्टरी फ़ंक्शंस सभी टैग प्रदान नहीं कर सकते हैं, लेकिन आपको लापता लोगों के लिए React.createFactory या React.createElement() का उपयोग करने में सक्षम होना चाहिए। या आप केवल JSX का उपयोग कर सकते हैं जो React.createElement() अनुवाद करता है और स्वाभाविक रूप से सभी टैग का समर्थन करता है।

SVG

स्रोत

sophiebits

सबसे उपयोगी टिप्पणी

मैंने देखा कि xlink:href विशेषता के बारे में काफी भ्रम है। यह _is_ वर्तमान में समर्थित है लेकिन आपको इसे अलग तरीके से लिखना होगा:

<use xlinkHref="#shape" x="50" y="50" />

प्रतिक्रिया सही ढंग से इसे xlink:href में बदल देगी, यहां तक कि 0.14.x में भी। उदाहरण के लिए यह पहेली देखें।

gaearon 15 मार्च 2016

👍9

सभी 107 टिप्पणियाँ

कोई इस पर काम कर रहा है? मैं filter टैग को लागू करने के लिए उत्सुक हूं।

nullobject 13 जून 2014

preserveAspectRatio भी गायब लगता है: http://jsfiddle.net/jonase/kb3gN/3025/

क्या मुझे इसके लिए एक पीआर बनाना चाहिए या क्या आप पहले सभी लापता विशेषताओं/टैग को एकत्र करना पसंद करते हैं और बाद में एक ही पैच बनाते हैं?

[संपादित करें] PreserveAspectRatio को प्रतिबद्ध में जोड़ा गया था https://github.com/facebook/react/commit/0f0328f0930d7fcf0b92cde40b1d6966cd747054

jonase 15 जून 2014

नमस्ते।

मार्कर* विशेषताओं को ऊपर बताए अनुसार #1738 में @cassus के लिए धन्यवाद जोड़ा गया है।

संबंधित <marker> SVG तत्व को जोड़ने के बारे में क्या?
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker

Delapouite 1 जुल॰ 2014

मुझे अभी एहसास हुआ कि मुझे भी इसकी ज़रूरत है। यहाँ इसका एक अच्छा अवलोकन है: http://tutorials.jenkov.com/svg/marker-element.html

jefffriesen 1 जुल॰ 2014

यह "यहां और वहां एक यादृच्छिक तत्व और विशेषता जोड़ें क्योंकि 1 व्यक्ति को इसकी आवश्यकता है" दृष्टिकोण हाथ से निकल गया है। इसलिए हमें या तो हर चीज का समर्थन करने की जरूरत है या कुछ भी नहीं (या वैकल्पिक रूप से चीजों का एक उचित सेट अभी जोड़ें और फिर वहां फ्रीज करें)।

मैंने _almost_ सब कुछ के लिए http://www.w3.org/TR/2003/REC-SVG11-20030114/attindex.html स्क्रैप किया और इसके साथ आया: https://github.com/zpao/ प्रतिक्रिया/तुलना/बकवास-svg.

हालाँकि, यह हमारे मिनीफाइड बिल्ड में ~ 2kb जोड़ता है (हालाँकि यह क्लोजर कंपाइलर के साथ अच्छी तरह से क्रश हो जाएगा) और मैं अभी उस आकार में वृद्धि नहीं करना चाहता। हमने एक अलग SVG बिल्ड करने के बारे में बात की है। या शिपिंग कि अलग से एक ऐडऑन के रूप में।

zpao 1 जुल॰ 2014

@zpao तुम सही हो। पूर्ण SVG समर्थन एक ऐडऑन हो सकता है। ऐसा करने के लिए रिएक्ट की तुलना में उदाहरण के लिए सूचित करने के लिए एक मूल्यह्रास चेतावनी सेट करने की आवश्यकता होगी। DOM.circle React.SVG.circle बन जाएगा

Delapouite 2 जुल॰ 2014

React.SVG.circle के लिए +1

cassus 2 जुल॰ 2014

@zpao
एक पूर्ण एसवीजी ऐड-ऑन एक अच्छे दृष्टिकोण की तरह लगता है। कई परियोजनाओं को किसी एसवीजी की आवश्यकता नहीं होती है, इसलिए हमें उनके लिए कोड को कम नहीं करना चाहिए। अन्य परियोजनाओं की जरूरत है और यह केवल समर्थन पर आधे रास्ते पर जाने का कोई मतलब नहीं है।

jefffriesen 2 जुल॰ 2014

totty90 20 जुल॰ 2014

2069 छवि के लिए समर्थन का अनुरोध करता है।

sophiebits 20 अग॰ 2014

छवि समर्थन के लिए +1

michaelcarter-wf 21 अग॰ 2014

छवि समर्थन के लिए भी +1

bobeagan 21 अग॰ 2014

<use> समर्थन के लिए +1। हम इसका उपयोग अपने svg आइकन सेट के लिए कर रहे हैं। हम इसे काम करने के लिए dangerouslySetHTML करने की कोशिश कर रहे हैं, हालांकि, इवेंट बबलिंग इसके साथ काम नहीं करता है।

chengyin 26 अग॰ 2014

strokeDashoffset गुम है। मैं इसे प्रगति पट्टी के लिए इस तरह उपयोग करना चाहता हूं: http://codepen.io/JMChristensen/pen/Ablch

jacobrask 26 अग॰ 2014

strokeDashoffset लिए +1

इसे प्रगति पट्टी के लिए भी उपयोग करना चाहते हैं।

SanderSpies 2 सित॰ 2014

मुझे याद आ रही alignment-baseline जब साथ काम कर <text>

ThomasDeutsch 3 सित॰ 2014

शायद किसी के पास http://www.w3.org/TR/SVG/Overview.html के माध्यम से ट्रैवेल करने और सभी विशेषताओं और गुणों को प्राप्त करने की इच्छाशक्ति है? (इस उद्देश्य के लिए एक बेहतर यूआरएल हो सकता है, निश्चित नहीं ...)

syranide 3 सित॰ 2014

एक और मदद यह जानना होगा कि इसे स्रोत-कोड और परीक्षणों में कहां बदलना है ताकि प्रतिक्रिया करने के लिए प्रतिबद्ध होना आसान हो।

ThomasDeutsch 3 सित॰ 2014

FWIW, अधिकांश विशेषताओं को अभी भी शैली विशेषता का उपयोग करके लागू किया जा सकता है।

<path style={{strokeDashoffset: 100}} />

jacobrask 4 सित॰ 2014

@syranide मैंने ऐसा किया (ज्यादातर स्वचालित क्योंकि यह मैन्युअल रूप से करने के लिए पागलपन होगा) - https://github.com/zpao/react/compare/fuck-svg। मेरी पिछली टिप्पणी देखें कि यह पहले से ही विलय क्यों नहीं है।

@ThomasDeutsch पिछले SVG संबंधित पुल अनुरोधों में से अधिकांश देखें। उस ने कहा, मैं उन्हें एक-एक करके जोड़ने के बजाय एक योजना का पता लगाऊंगा (मैं आपको अपनी पिछली टिप्पणी पर भी निर्देशित करूंगा)।

zpao 8 सित॰ 2014

टेक्स्टपाथ के लिए +1 - मुझे उस प्रोजेक्ट के लिए इसकी आवश्यकता है जिस पर मैं वर्तमान में काम कर रहा हूं, और अभी मैं एक बुरा समाधान हैक कर रहा हूं। मुझे रिएक्ट एसवीजी प्लगइन पैक के कार्यान्वयन में योगदान करने में खुशी होगी

mhintz 8 सित॰ 2014

:+1: पूर्ण एसवीजी ऐड-ऑन के लिए। कोई अनुमान है कि यह कब शिप होगा?

bostonou 11 सित॰ 2014

विदेशी वस्तु के लिए +1

1730wang 2 अक्तू॰ 2014

विदेशी वस्तु के लिए +1

reallistic 4 अक्तू॰ 2014

विशेषता xlink:href svg sprites का उपयोग करने के लिए।

ryanzec 9 नव॰ 2014

<use> समर्थन के लिए +1

peterwmwong 14 नव॰ 2014

इसके लिए वर्तमान में https://www.npmjs.org/package/react-inlinesvg एक

iammerrick 14 नव॰ 2014

विशेषताएँ: मास्कइकाइयाँ और मास्क सामग्री इकाइयाँ (# 2056)

vanwagonet 14 नव॰ 2014

मुखौटा विशेषता #2535

Coobaha 16 नव॰ 2014

patternTransform

bobeagan 18 नव॰ 2014

टेक्स्ट विशेषता text-anchor

farin 27 नव॰ 2014

टेक्स्टपाथ के लिए +1

blake8086 10 दिस॰ 2014

svg आइकन हैंडलिंग के लिए <use> लिए +1।

pocketjoso 17 दिस॰ 2014

एक एसवीजी ऐड-ऑन के लिए +1। मुझे वर्तमान में केवल एक परियोजना के लिए <clipPath> , लेकिन कौन जानता है कि मुझे भविष्य में क्या चाहिए। एक व्यापक ऐड-ऑन बहुत मददगार होगा।

mikecao 22 दिस॰ 2014

ऐड-ऑन के लिए +1।

हम रिएक्ट के साथ एसवीजी का व्यापक उपयोग करने की योजना बना रहे हैं, इसलिए हमारे जैसी परियोजनाओं के लिए एक पूर्ण एसवीजी ऐड-ऑन एक महान विचार की तरह लगता है।

hollandmatt 24 दिस॰ 2014

टेक्स्टपाथ के लिए +1 और सामान्य रूप से अधिक पूर्ण svg समर्थन।

jbroadway 7 जन॰ 2015

जब तक एसवीजी पूरी तरह से समर्थित नहीं है, तब तक रिएक्ट को यह बताना एक अच्छा समाधान है कि आपको किन एसवीजी विशेषताओं को प्रस्तुत करना चाहिए और उन तत्वों को स्पष्ट रूप से घोषित करना चाहिए जिनकी आपको आवश्यकता है। उदाहरण के लिए, <use> को इस तरह एक्सेस किया जा सकता है:

var DOMProperty = require('react/lib/DOMProperty');

// xlink:href is not a standardly-supported svg attribute, but you can tell
// React that it is ok.
DOMProperty.injection.injectDOMPropertyConfig({
  isCustomAttribute: function (attributeName) {
    return (attributeName === 'xlink:href');
  }
});

var SvgButton = React.createClass({
  render: function render() {
    var use = React.createElement('use', {
      'xlink:href': '#' + this.props.icon
    });
    return (
      <button>
        <svg>
          { use }
        </svg>
        <div>{ this.props.label }</div>
      </button>
    );
 });

jeffkole 21 जन॰ 2015

@jeffkole ऐसा करते समय सावधान रहें - यदि विशेषता बदल जाती है, तो प्रतिक्रिया अभी भी setAttribute (setAttributeNS नहीं) को कॉल करेगी, और अपडेट शायद ठीक से काम नहीं करेगा।

sophiebits 21 जन॰ 2015

@spicyj मुझे रिएक्ट में कोई नेमस्पेस सपोर्ट नहीं दिख रहा है (यानी, कोडबेस में setAttributeNS कोई कॉल नहीं है)। नामस्थान के साथ एक विशेषता सेट करने के उचित तरीके पर कोई सुझाव?

jeffkole 21 जन॰ 2015

हमें पता नहीं चला है कि नेमस्पेस्ड विशेषताएँ कैसे काम करेंगी और अभी इसका समर्थन नहीं करती हैं, क्षमा करें।

sophiebits 21 जन॰ 2015

vector-effect अच्छा रहेगा। क्या इसके बिना निश्चित चौड़ाई वाले स्ट्रोक रखने का कोई और तरीका है जिसका उपयोग इस बीच किया जा सकता है?

rileytomasek 2 फ़र॰ 2015

विदेशी वस्तु के लिए +1

Nek 8 फ़र॰ 2015

टेक्स्ट बेसलाइन विशेषताओं के लिए बस मेरे पीआर को संदर्भित करना: #2697

gentooboontoo 9 फ़र॰ 2015

ओह शिट मुझे use टैग चाहिए: निराश:

chicoxyzzy 25 फ़र॰ 2015

मैंने एक कस्टम घटक का उपयोग करने के लिए खुद को इस्तीफा दे दिया है जिसमें एक रेंडर फ़ंक्शन है जो लौटाता है

<svg dangerouslySetInnerHTML={{ __html: '<use xlink:href="#' + this.props.icon + '"/>' }} />

यह बदसूरत है, लेकिन यह काम करता है।

jeffkole 25 फ़र॰ 2015

:+1: इस पर

gre 6 मार्च 2015

Addons में पूर्ण svg समर्थन के लिए +1 चालू करें

jaketrent 11 मार्च 2015

:+1:

danielalves 18 मार्च 2015

@zpao @spicyj इन व्यक्तिगत एसवीजी तत्वों को बंदर-पैचिंग ReactDOM और SVGDOMPropertyConfig बिना प्रतिक्रिया में जोड़ने का एक समर्थित तरीका है?

akre54 23 मार्च 2015

नहीं, माफ करिए।

sophiebits 23 मार्च 2015

छवि और विदेशी वस्तु के लिए +1

mixtur 27 मार्च 2015

विदेशी वस्तु के लिए +1

msutherl 9 अप्रैल 2015

animate काम नहीं करता है और संभवतः इसकी कुछ विशेषताएं: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate

jasonkuhrt 10 अप्रैल 2015

ऐडऑन में एसवीजी को सपोर्ट करने की स्थिति क्या है? बस आज इसमें भाग गया :-(

aaronshaf 12 अप्रैल 2015

cc @xymostech @MichelleTodd

sophiebits 12 अप्रैल 2015

नामांकित विशेषताओं के लिए +1।

yayitswei 12 अप्रैल 2015

Addons में पूर्ण svg समर्थन के लिए +1 चालू करें

zuotian 20 अप्रैल 2015

+1000 एसवीजी विशेषता समर्थन के लिए :-)

Loque- 24 अप्रैल 2015

समर्थन के लिए +1गुण

frediy 28 अप्रैल 2015

विशेषता "भरने-नियम" जोड़ने का अनुरोध, शायद "भरने के नियम" के रूप में

Dangoo 30 अप्रैल 2015

एक एसवीजी एडऑन भी देखना चाहेंगे: +1:

mmlkrx 30 अप्रैल 2015

रिएक्ट कोर टीम, क्या इस पर परदे के पीछे कोई हलचल/चर्चा है?

aaronshaf 30 अप्रैल 2015

इस पर विशेष रूप से नहीं, बल्कि #3718, #3763 दोनों ही SVG पर काम किया जा रहा है और #3067 भी इसी विशेषता परिवर्तन से संबंधित है।

sophiebits 30 अप्रैल 2015

पूर्ण एसवीजी समर्थन के लिए +1। ऐसा होने से पहले मुझे कस्टम टैग और विशेषताओं को बनाने के लिए एक तरीके की आवश्यकता होगी। क्या कोई कृपया इसमें मेरी मदद कर सकता है?

ersagunkuruca 25 मई 2015

मार्कर तत्व भी गायब है (https://developer.mozilla.org/en/docs/Web/SVG/Element/marker)

tcoopman 25 मई 2015

@ersagunkuruca इस बीच https://gist.github.com/akre54/80eaa63762ea499029f0 आज़माएं

akre54 26 मई 2015

3945 मार्कर के लिए रिएक्ट एसवीजी में ये टैग समर्थित नहीं हैं: रेफक्स, रेफी, ओरिएंट

omidb 18 जून 2015

:+1: मार्करों के लिए!

omidb 18 जून 2015

एसवीजी सभी चीजों के लिए +1।

kulicuu 18 जून 2015

:+1

एनिमेट ट्रांसफॉर्म गुणों के लिए समर्थन के बारे में कैसे?

<path
    d="M120 60c0-31.13-26.86-60-60-60">
    <animateTransform
          attributeName="transform"
          type="rotate"
          from="0 60 60"
          to="360 60 60"
          dur="1.5s"
          repeatCount="indefinite" />
</path>

वर्तमान में बस के साथ समाप्त होता है

<path d="M120 60c0-31.13-26.86-60-60-60" data-reactid=".0.0.0.1.6.0.0.$0.0.0.2">
    <animateTransform type="rotate" data-reactid=".0.0.0.1.6.0.0.$0.0.0.2.0"></animateTransform>
</path>

codeuniquely 26 जून 2015

छवि के लिए +1

nlhkh 29 जून 2015

+सभी एसवीजी समर्थित

webhipster 1 जुल॰ 2015

फ़िल्टर के लिए +1

wuct 10 जुल॰ 2015

उपयोग के समर्थन के लिए +1!

ptim 13 जुल॰ 2015

नामांकित विशेषताओं के लिए +1

ledbruno 16 जुल॰ 2015

+1 use और filter विशेषताओं के लिए समर्थन

olegshilov 29 जुल॰ 2015

<image> समर्थन के लिए +1। मुझे एक इनलाइन एसवीजी प्रस्तुत करने के लिए प्रतिक्रिया की आवश्यकता है जिसमें एक क्लिपिंग पथ के अंदर एक छवि है, और यह <svg> टैग में xmlns:xlink="http://www.w3.org/1999/xlink" attr पर लटका हुआ है।

ghost 29 जुल॰ 2015

filter लिए +1

crenwick 29 जुल॰ 2015

@zpao की टिप्पणी को ध्यान में रखते हुए, क्या इस मुद्दे को बंद कर देना चाहिए? या कम से कम, क्या हम उस जानकारी के साथ ओपी को अपडेट कर सकते हैं? मैंने अपडेट के लिए थ्रेड की सदस्यता ली है लेकिन @zpao की टिप्पणी दफन है (इस तथ्य के साथ कि काम पहले ही हो चुका है) और यह किसी के लिए भी भ्रमित करने वाला है जिसने पूरे धागे को नहीं पढ़ा है।

matthewwithanm 30 जुल॰ 2015

@zpao की टिप्पणी इस निर्णय की व्याख्या करती है कि इसे वर्तमान में प्रतिक्रिया में क्यों नहीं बनाया गया है, लेकिन क्या कोई बेहतर स्पष्टीकरण है कि एक एडन क्यों मौजूद नहीं है?
क्या यह कुछ ऐसा है जिसे अभी भी खोजा जा सकता है?

crenwick 30 जुल॰ 2015

मार्कर के लिए +1: refx, refy, उन्मुख

chenyunchen 10 अग॰ 2015

पाठ की विशेषताओं के लिए +1: घुमाएँ, प्रमुख-आधार रेखा

http://www.w3.org/TR/SVG/text.html#TextElementRotateAttribute

xile611 28 अग॰ 2015

+1 एडऑन

polgfred 30 अग॰ 2015

+1 एडऑन

दरअसल रिएक्ट कोर 'रिएक्शन' और डोम 'रिएक्शन-डोम' में विभाजित होने की प्रक्रिया में है, और मैं अनुमान लगा रहा हूं कि 'रिएक्शन-एसवीजी' आखिर में कहां आएगा

conundrumer 4 सित॰ 2015

फिल्टर के लिए +1।

AbdulazizGH 8 सित॰ 2015

vector-effect विशेषता कृपया

sirreal 7 अक्तू॰ 2015

मुझे लगता है कि एसवीजी टैग/विशेषताओं का अनुरोध करने वाले लोगों को उनकी आवश्यकता होने पर प्रतिक्रिया के लिए एक बहुत ही खराब मॉडल है। यह मूर्खतापूर्ण है कि मुझे पृष्ठ पर एक कार्यशील एसवीजी प्रस्तुत करने के लिए केवल dangerouslySetInnerHTML का उपयोग करना होगा। कहा जा रहा है, यहाँ कुछ चीज़ें गायब हैं:

_टैग:_

feMorphology
feOffset
feColorMatrix
feMerge
feMergeNode

_गुण:_

filterUnits
stdDeviation
values
in
operator

और शायद दोनों श्रेणियों में बहुत अधिक। वे विशिष्ट एसवीजी कोड में से कुछ हैं जिनके साथ मैं काम कर रहा हूं।

JKillian 9 अक्तू॰ 2015

vector-effect लिए +1

benjeffery 15 अक्तू॰ 2015

stdDeviation लिए +1

philihp 26 अक्तू॰ 2015

एक अलग और पूर्ण React.SVG के लिए +1। मैं अब तक रिएक्ट में एसवीजी के साथ काम करना पसंद कर रहा हूं, लेकिन समर्थन की अपूर्णता इसे किसी भी अर्ध-जटिल एप्लिकेशन के लिए नहीं जाने देती है।

luke-oneill 11 नव॰ 2015

@spicyj के पास एक अलग कॉन्फ़िगरेशन की आवश्यकता को समाप्त करने की योजना है जिसे हमें अपडेट करते रहने की आवश्यकता है। उम्मीद है कि यह जल्द ही पूरा हो जाएगा। इस बीच, कृपया कस कर पकड़ें।

zpao 12 नव॰ 2015

एनिमेट ट्रांसफॉर्म के लिए +1

qinyang912 16 नव॰ 2015

हावी-आधार रेखा के लिए +1 (#3199.)

okorz001 17 नव॰ 2015

जैसे @zpao ने कहा, हम इसे जल्द ही ठीक करने जा रहे हैं ताकि किसी भी विशेषता का उपयोग किया जा सके।

इस मुद्दे को तब तक के लिए लॉक कर दें।

sophiebits 17 नव॰ 2015

यह https://github.com/facebook/react/pull/5714 में तय किया गया था

gaearon 25 दिस॰ 2015

5714 को # 6243 में वापस कर दिया गया था, और इस प्रकार हमें अभी भी एक विशेषता श्वेतसूची की आवश्यकता है। हालाँकि, अच्छी खबर यह है कि #6243 में MDN के लिए स्क्रैप की गई विशेषताएँ शामिल हैं, इसलिए हम उम्मीद करते हैं कि यह 95% उपयोग के मामलों को कवर करेगी । मैंने इस पूरे मुद्दे और जुड़े मुद्दों और पीआर के माध्यम से पढ़ा और मैन्युअल रूप से दो लापता गुण ( `focusable` और `vector-effect` ) #6267 में जोड़े। मुझे उम्मीद है कि ये बदलाव v15 में आएंगे।

दिलचस्प बात यह है कि मुझे यकीन नहीं है कि _tag_ श्वेतसूची अब प्रासंगिक है या नहीं। अब तक मैं <marker> , <textPath> , <feGaussianBlur> और इस मुद्दे में अनुरोधित अन्य टैग और मास्टर पर परेशानी के बिना जुड़े पीआर में उपयोग करने में सक्षम हूं। मैं देखता हूं कि fbjs अभी भी एक एसवीजी टैग श्वेतसूची को बनाए रखता है और मुझे यह कहने के लिए पर्याप्त रूप से कोडबेस नहीं पता है कि इससे गायब टैग आज मेरे लिए क्यों काम करते हैं, इसलिए उम्मीद है कि @zpao या @spicyj इसे स्पष्ट कर सकते हैं, और क्या #6243 को पूरक करने के लिए हमें वहां लापता टैग भी जोड़ने होंगे।

मैं इस मुद्दे को अनलॉक कर रहा हूं क्योंकि विशेषता श्वेतसूची अभी भी प्रासंगिक है, लेकिन उम्मीद है कि अब हम बहुत कम अनुरोध देखेंगे कि अधिकांश विशेषताएँ जो दोनों कल्पना में हैं और ब्राउज़र द्वारा कार्यान्वित की जाती हैं, समर्थित हैं। अगर कुछ अभी भी अंतिम v15 में समर्थित नहीं है, तो कृपया हमें यहां बताएं।

यह नोट v15 RC1 पर लागू नहीं होता है जो सभी SVG विशेषताओं से होकर गुजरता है।

gaearon 15 मार्च 2016

<use xlinkHref="#shape" x="50" y="50" />

gaearon 15 मार्च 2016

👍9

मेरे उपयोग के मामले के लिए मुझे कुछ फ़िल्टर तत्वों जैसे feFuncR , विशेष रूप से उनकी विशेषताओं ( slope , intercept , आदि) को पहचानने के लिए प्रतिक्रिया की आवश्यकता थी। यह 15.0-आरसी2 में ठीक प्रतीत होता है, लेकिन 0.14.एक्स के लिए मैंने पहले react / react-dom आयात करने से पहले react/lib/SVGDOMPropertyConfig द्वारा निर्यात किए गए शब्दकोश में इन विशेषताओं को जोड़कर इसके आसपास काम किया। अपने आप। जैसे:

// Needed to set correct xmlns on <svg> and to preserve attributes on feFunc*.
// Required for 0.14.x. May become unnecessary with 15.x

var SVGDOMPropertyConfig = require("react/lib/SVGDOMPropertyConfig");

var DOMProperty = require("react/lib/DOMProperty");
var MUST_USE_ATTRIBUTE = DOMProperty.injection.MUST_USE_ATTRIBUTE;

SVGDOMPropertyConfig.Properties.in = MUST_USE_ATTRIBUTE;
SVGDOMPropertyConfig.Properties.intercept = MUST_USE_ATTRIBUTE;
SVGDOMPropertyConfig.Properties.slope = MUST_USE_ATTRIBUTE;
SVGDOMPropertyConfig.Properties.xmlns = MUST_USE_ATTRIBUTE;

var React = require("react");
var render = require("react-dom").render;

यह स्पष्ट रूप से एक हैक है लेकिन मुझे यह dangerouslySetInnerHTML बेहतर लगता है

Arnavion 21 मार्च 2016

हालांकि यह काम करता है, यह आधिकारिक तौर पर खुला एपीआई नहीं है और किसी भी मामूली या पैच रिलीज में टूट सकता है। आप इसका इस्तेमाल कर सकते हैं लेकिन अपने जोखिम पर। अगर अभी भी कुछ छूट रहा है तो कृपया हमारे साथ काम करें ताकि हम उसे जोड़ दें। मुझे यह जानकर खुशी हुई कि आपको 15 RC2 में कोई समस्या नहीं है।

gaearon 21 मार्च 2016

हाँ, बिल्कुल। मैं केवल इसका उपयोग तब तक कर रहा हूं जब तक कि 15 आरसी स्थिति से बाहर नहीं आ जाते।

Arnavion 21 मार्च 2016

v15.0 में (लगभग) पूर्ण SVG समर्थन के लिए बहुत खुश हैं, लेकिन मुझे एहसास हो रहा है कि कुछ नामांकित विशेषताएँ जैसे xmlns और xmlnsXlink रेंडर करते समय लागू नहीं हो सकीं, और यह दिखाते समय ठीक है ब्राउज़र में svg ।

यदि आप एक .svg छवि बनाना चाहते हैं तो वे विशेषताएँ आवश्यक हैं।

ReactDOMServer.renderToStaticMarkup(<MyCustomSVG />)

तो उपरोक्त कोड करना, काम नहीं करेगा।

शायद इस तथ्य से संबंधित है कि:

... document.createElement का उपयोग करने के लिए धन्यवाद, हमें अब एसवीजी टैग की सूची बनाए रखने की आवश्यकता नहीं है, इसलिए कोई भी एसवीजी टैग जो पहले असमर्थित थे, उन्हें रिएक्ट 15 में ठीक काम करना चाहिए।

और document.createElementNS ।

elrumordelaluz 12 अप्रैल 2016

और दस्तावेज़ नहीं। createElementNS।

ब्लॉग पोस्ट थोड़ा बहुत सरल है, लेकिन createElementNS का उपयोग तब किया जाता है जब हम <svg> टैग के अंतर्गत होते हैं। यदि ऐसा नहीं होता है, तो क्या आप समस्या का वर्णन करते हुए एक अलग समस्या दर्ज कर सकते हैं, एक JSFiddle के साथ जो इसे पुन: उत्पन्न करता है? धन्यवाद!

gaearon 12 अप्रैल 2016

धन्यवाद @gaearon। मुझे लगता है कि जब प्रस्तुत करना यह होता है svg के माध्यम से ब्राउज़र में ReactDOM । संभवत: यह मुद्दा ReactDOMServer ।

यहां एक पेन है जो प्रस्तुत SVG और renderToStaticMarkup() माध्यम से उत्पन्न कोड दिखाता है जहां कम से कम xmlNS और xmlnsXlink attrs गायब है।

अगर ऐसा है तो मैं इस मुद्दे को अलग से दायर कर सकता हूं।

elrumordelaluz 12 अप्रैल 2016

हाँ, xmlns और xmlns:Xlink गायब हैं। https://github.com/facebook/react/pull/6471 में इसे जोड़ने के लिए कुछ कार्य प्रगति पर हैं।

zpao 12 अप्रैल 2016

😕1

मुझे अभी भी समर्थित टैग की सूची में <animate> और <animateTransform> रहे हैं। क्या कोई कारण है कि आपने इसका समर्थन नहीं करना चुना?

shilpan 16 अप्रैल 2016

@shilpan

सभी टैग अब समर्थित हैं। सूची केवल यह बताती है कि कौन से टैग React.DOM.* फ़ैक्टरी फ़ंक्शंस के रूप में समर्थित हैं:

निम्नलिखित SVG तत्व React.DOM में समर्थित हैं

(जोर मेरा)

यदि आप JSX का उपयोग करते हैं, तो आपको इसके बारे में बिल्कुल भी चिंता करने की आवश्यकता नहीं है— <animate> और <animateTransform> लिखना केवल इसलिए काम करेगा क्योंकि JSX React.DOM.* कारखानों पर निर्भर नहीं है।

यहां तक कि अगर आप JSX का उपयोग नहीं करते हैं, तो आप React.createElement('animate', ...) उपयोग कर सकते हैं जो ठीक काम करेगा, या अपना खुद का फ़ैक्टरी फ़ंक्शन बनाएँ: var animate = React.createFactory('animate") ।

gaearon 16 अप्रैल 2016

+1 xmlns लिए समर्थन जोड़ने के लिए .... इस बीच अगर किसी को कामकाज में दिलचस्पी है (जिसे मुझे आईई 9-11 का समर्थन करने में सक्षम होना चाहिए) तो मैं यही लेकर आया हूं:

// explicitly build the SVG to be rendered here so we don't lose the NS
const stringifiedSvg = `<svg xmlns="http://www.w3.org/2000/svg" class="svgClass">
                               <use xlink:href="#linkToSymbolId"></use>
                        <svg/>`

return <div dangerouslySetInnerHTML={{__html: stringifiedSvg}}/>

alexjsdev 3 मई 2016

👍3

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

React: SVG टैग और विशेषताएँ गुम हैं

सबसे उपयोगी टिप्पणी

सभी 107 टिप्पणियाँ

2069 छवि के लिए समर्थन का अनुरोध करता है।

3945 मार्कर के लिए रिएक्ट एसवीजी में ये टैग समर्थित नहीं हैं: रेफक्स, रेफी, ओरिएंट

संबंधित मुद्दों