أي شخص يعمل على هذا؟ سأكون حريصًا على تنفيذ علامة filter .

يبدو أيضًا أن preserveAspectRatio مفقود: http://jsfiddle.net/jonase/kb3gN/3025/

هل يجب أن أقوم بإنشاء علاقات عامة لهذا أم أنك تفضل جمع كل السمات / العلامات المفقودة أولاً ثم إنشاء رقعة واحدة لاحقًا؟

تمت إضافة [تحرير] saveAspectRatio في الالتزام https://github.com/facebook/react/commit/0f0328f0930d7fcf0b92cde40b1d6966cd747054

مرحبا.

تمت إضافة سمات العلامة * بفضل cassus في # 1738 كما هو مذكور أعلاه.

ماذا عن إضافة عنصر <marker> SVG ذي الصلة؟
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker

لقد أدركت للتو أنني بحاجة إلى هذا أيضًا. وإليك نظرة عامة جيدة عنه: http://tutorials.jenkov.com/svg/marker-element.html

لقد خرج نهج "إضافة عنصر وسمة عشوائية هنا وهناك حيث يحتاجه شخص واحد" عن السيطرة. لذلك نحن إما بحاجة إلى دعم كل شيء أو لا شيء (أو بدلاً من ذلك نضيف مجموعة معقولة من الأشياء الآن ثم نتجمد هناك).

لقد ألغيت http://www.w3.org/TR/2003/REC-SVG11-20030114/attindex.html لكل شيء _ تقريبًا_ (باستثناء السمات التي تحتوي على مساحة الاسم) وتوصلت إلى هذا: https://github.com/zpao/ رد فعل / قارن / اللعنة- svg.

ومع ذلك ، فإن هذا يضيف حوالي 2 كيلو بايت إلى تصميمنا المصغر (على الرغم من أنه سيتحطم جيدًا مع مترجم الإغلاق) ولا أريد زيادة هذا الحجم في الوقت الحالي. لقد تحدثنا عن إنشاء SVG منفصل. أو شحن ذلك بشكل منفصل كملحق.

zpao أنت على حق. يمكن أن يكون دعم SVG الكامل بمثابة ملحق. للقيام بذلك ، يجب ضبط تحذير الاستهلاك للإبلاغ على سبيل المثال من React.DOM.circle سيصبح React.SVG.circle

+1 لدائرة React.SVG

تضمين التغريدة
تبدو الوظيفة الإضافية الكاملة لـ SVG وكأنها طريقة جيدة. لا تحتاج العديد من المشاريع إلى أي SVG ، لذلك لا ينبغي أن نثقل الكود الخاص بها. تحتاج المشاريع الأخرى وليس من المنطقي أن تمضي في منتصف الطريق فقط في الدعم.

+1

2069 يطلب دعم الصورة.

+1 لدعم الصور

+1 لدعم الصور أيضًا

+1 لدعم <use> . نحن نستخدم ذلك لمجموعة أيقونات svg الخاصة بنا. نحن نحاول استخدام dangerouslySetHTML لجعله يعمل ، ومع ذلك ، فإن الحدث المتدفق لا يعمل معه.

مفقود strokeDashoffset . أريد استخدامه لشريط تقدم ، مثل هذا: http://codepen.io/JMChristensen/pen/Ablch

+1 لـ strokeDashoffset

تريد أيضًا استخدامه لشريط تقدم.

أفتقد alignment-baseline عند العمل مع <text>

ربما شخص ما لديه قوة الإرادة للبحث من خلال http://www.w3.org/TR/SVG/Overview.html والحصول على جميع السمات والخصائص؟ (قد يكون هناك عنوان URL أفضل لهذا الغرض ، لست متأكدًا ...)

هناك مساعدة أخرى تتمثل في معرفة مكان تغيير هذا في التعليمات البرمجية المصدر والاختبارات بحيث يكون من السهل الالتزام بالتفاعل.

FWIW ، لا يزال من الممكن تطبيق معظم السمات باستخدام سمة النمط.

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

syranide لقد فعلت ذلك (غالبًا ما يكون آليًا لأن ذلك سيكون من الجنون القيام به يدويًا) - https://github.com/zpao/react/compare/fuck-svg. انظر تعليقي السابق حول سبب عدم دمج ذلك بالفعل.

ThomasDeutsch اطلع على معظم طلبات السحب السابقة ذات الصلة بـ SVG. بعد قولي هذا ، أفضل اكتشاف خطة بدلاً من إضافتها واحدة تلو الأخرى (سأوجهك إلى تعليقي السابق أيضًا).

+1 لـ textPath - أحتاجه لمشروع أعمل عليه حاليًا ، وأقوم الآن باختراق حل سيء. سأكون سعيدًا بالمساهمة في تنفيذ حزمة مكوِّن React SVG

: +1: للحصول على إضافة SVG كاملة. أي تقديرات متى سيتم الشحن؟

+1 لـ foreignObject

+1 لـ foreignObject

السمة xlink:href أجل استخدام svg sprites.

+1 لدعم <use>

تستخدم حاليًا https://www.npmjs.org/package/react-inlinesvg كحل بديل لهذا الغرض.

السمات: maskUnits & maskContentUnits (# 2056)

سمة القناع # 2535

patternTransform

سمة النص text-anchor

+1 لـ textPath

+1 لـ <use> للتعامل مع رمز svg.

+1 لوظيفة SVG الإضافية. أحتاج حاليًا فقط <clipPath> لمشروع ما ، لكن من يدري ما سأحتاجه في المستقبل. ستكون الوظيفة الإضافية الشاملة مفيدة للغاية.

+1 لوظيفة إضافية.

نحن نخطط للاستفادة المكثفة من SVG مع React ، لذا فإن إضافة SVG كاملة لمشاريع مثل مشروعنا تبدو فكرة رائعة.

+1 لـ textPath والمزيد من الدعم الكامل لـ svg بشكل عام.

حتى يتم دعم SVG بالكامل ، فإن الحل المناسب هو إخبار React بسمات svg التي يجب أن تمر من خلالها لتقديم العناصر التي تحتاجها بشكل صريح والإعلان عنها. على سبيل المثال ، يمكن الوصول إلى <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 كن حذرًا عند القيام بذلك - ستستمر React في استدعاء setAttribute (not setAttributeNS) إذا تغيرت السمة ، وربما لن يعمل التحديث بشكل صحيح.

spicyj لا أرى أي دعم لمساحة الاسم في setAttributeNS في قاعدة الكود). أي اقتراح حول طريقة مناسبة لتعيين سمة مع مساحة الاسم؟

لم نتوصل بعد إلى معرفة كيف ستعمل السمات ذات مساحة الاسم ولا ندعمها في الوقت الحالي ، معذرةً.

vector-effect سيكون رائعًا. هل هناك طريقة أخرى للاحتفاظ بضربات العرض الثابتة بدونها والتي يمكن استخدامها في هذه الأثناء؟

+1 لـ foreignObject

مجرد الرجوع إلى العلاقات العامة الخاصة بي للحصول على سمات خط الأساس للنص: # 2697

يا إلهي ، أحتاج إلى use tag: محبط:

لقد استسلمت لاستخدام مكون مخصص له وظيفة عرض تعود

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

إنه قبيح ، لكنه يعمل.

: +1: على هذا

إجراء +1 للحصول على دعم svg الكامل في الوظائف الإضافية

: +1:

zpaospicyj هناك طريقة معتمدة من إضافة هذه العناصر SVG الفردية للرد دون القرد الترقيع ReactDOM و SVGDOMPropertyConfig ؟

اسف لا.

+1 للصورة والكائن الأجنبي

+1 لـ foreignObject

animate لا يعمل وربما بعض سماته: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate

ما هي حالة دعم SVG في الوظائف الإضافية؟ اصطدمت للتو بهذا اليوم :-(

تضمين التغريدة

+1 للسمات ذات مساحة الاسم.

إجراء +1 للحصول على دعم svg الكامل في الوظائف الإضافية

+1000 لدعم سمات SVG :-)

+1 للدعمصفات

طلب إضافة السمة "ملء القاعدة" ، ربما كـ "fillRule"

هل ترغب أيضًا في رؤية ملحق SVG: +1:

فريق React core ، هل هناك أي حركة / نقاش من وراء الكواليس حول هذا الأمر؟

ليس في هذا على وجه التحديد ، ولكن # 3718 ، # 3763 كلاهما من الأشياء SVG يتم العمل عليها و # 3067 مرتبط أيضًا بتغيير هذه السمات.

+1 للحصول على دعم SVG الكامل. قبل حدوث ذلك ، سأحتاج إلى طريقة لإنشاء علامات وسمات مخصصة. هل يمكن لأي شخص مساعدتي في ذلك؟

عنصر العلامة مفقود أيضًا (https://developer.mozilla.org/en/docs/Web/SVG/Element/marker)

ersagunkuruca حاول https://gist.github.com/akre54/80eaa63762ea499029f0 في هذه الأثناء

3945 هذه العلامات غير مدعومة في React SVG للعلامة: refx ، refy ، orient

: +1: للعلامات!

+1 لـ SVG كل الأشياء.

: +1

ماذا عن دعم خصائص animateTransform

<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>

+1 للصورة

+ كل دعم SVG

+1 للتصفية

+1 لاستخدام الدعم!

+1 للسمات ذات مساحة الاسم

+1 لسمات use و filter تدعم السمات

+1 لدعم <image> . أحتاج إلى React لعرض SVG مضمن يحتوي على صورة داخل مسار القطع ، ويتم تعليقها على xmlns:xlink="http://www.w3.org/1999/xlink" attr في علامة <svg> .

+1 لـ filter

بالنظر إلى تعليق zpao ، هل يجب إغلاق هذه القضية؟ أو على الأقل ، هل يمكننا تحديث OP بهذه المعلومات؟ لقد اشتركت في سلسلة الرسائل للحصول على التحديثات ولكن تعليق

يشرح تعليق zpao القرار بشأن سبب عدم
هل هذا شيء لا يزال من الممكن استكشافه؟

+1 للعلامة: المرجع ، المرجع ، المشرق

+1 لسمات النص: تدوير ، خط الأساس السائد

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

+1 الملحق

+1 الملحق

في الواقع ، فإن React في طور الانقسام إلى جوهر "رد فعل" و "رد فعل دوم" ، وأعتقد أن هذا هو المكان الذي سيأتي فيه "رد فعل- svg" أخيرًا

+1 للتصفية.

السمة vector-effect فضلك

أعتقد أن الأشخاص الذين يطلبون علامات / سمات SVG عندما يحتاجون إليها يعد نموذجًا سيئًا جدًا لـ React. من السخف أنني يجب أن أستخدم dangerouslySetInnerHTML فقط لعرض SVG عاملاً على الصفحة. بعد قولي هذا ، إليك بعض الأشياء المفقودة:

_العلامات: _

• feMorphology
• feOffset
• feColorMatrix
• feMerge
• feMergeNode

_صفات:_

• filterUnits
• stdDeviation
• values
• in
• operator

وربما المزيد في كلتا الفئتين. هذه فقط بعض من كود SVG المحدد الذي أعمل معه.

+1 لـ vector-effect

+1 لـ stdDeviation

+1 للحصول على React منفصل وكامل. أنا أحب العمل مع SVG في React حتى الآن ، لكن عدم اكتمال الدعم يجعله غير مناسب لأي تطبيق شبه معقد.

spicyj لديه خطة لإزالة الحاجة إلى تكوين منفصل نحتاج إلى تحديثه باستمرار. نأمل أن يكتمل قريبا. في غضون ذلك ، يرجى الانتظار.

+1 لتحريك التحويل

+1 لخط الأساس المسيطر (# 3199.)

كما قال zpao ، سنصلح هذا

قفل هذه القضية حتى ذلك الحين.

تم إصلاح ذلك في https://github.com/facebook/react/pull/5714.

تم إرجاع 5714 في # 6243 ، وبالتالي لا نزال نطلب قائمة بيضاء للسمات. ومع ذلك ، فإن الخبر السار هو أن # 6243 يحتوي على سمات تم حذفها من أجل MDN لذلك نتوقع أن تغطي 95٪ من حالات الاستخدام . لقد قرأت هذه المشكلة برمتها والمشكلات المرتبطة والعلاقات العامة وأضفت يدويًا خاصيتين مفقودتين ( focusable و vector-effect ) في # 6267. أتوقع أن تصل هذه التغييرات في الإصدار 15.

ومن المثير للاهتمام ، أنني لست متأكدًا مما إذا كانت القائمة البيضاء _tag_ مناسبة بعد الآن. لقد تمكنت حتى الآن من استخدام <marker> و <textPath> و <feGaussianBlur> والعلامات الأخرى المطلوبة في هذه المشكلة وفي العلاقات العامة المرتبطة دون مشاكل على المستوى الرئيسي. أرى أن fbjs لا يزال يحتفظ بقائمة بيضاء لعلامات zpao أو spicyj من توضيح ذلك ، وما إذا كان نحتاج أيضًا إلى إضافة العلامات المفقودة هناك ، لاستكمال # 6243.

أقوم بإلغاء قفل هذه المشكلة لأن القائمة البيضاء للسمات لا تزال ذات صلة ، ولكن نأمل أن نرى عددًا أقل بكثير من الطلبات الآن حيث يتم دعم معظم السمات الموجودة في المواصفات والتي يتم تنفيذها بواسطة المتصفحات. إذا كان هناك شيء لا يزال غير مدعوم في الإصدار الأخير من الإصدار 15 ، فيرجى إخبارنا بذلك هنا.

لا تنطبق هذه الملاحظة على الإصدار 15 RC1 الذي يمرر جميع سمات SVG من خلاله.

لقد لاحظت أنه يبدو أن هناك قدرًا كبيرًا من الالتباس حول السمة xlink:href . _ is_ مدعوم حاليًا ولكنك ستحتاج إلى كتابته بطريقة مختلفة:

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

ستحول React ذلك بشكل صحيح إلى xlink:href ، حتى في 0.14.x. انظر هذا الكمان كمثال.

بالنسبة لحالة الاستخدام الخاصة بي ، كنت بحاجة إلى React للتعرف على بعض عناصر التصفية مثل feFuncR ، وتحديدًا سماتها ( slope ، intercept ، إلخ). يبدو أنه جيد في 15.0-rc2 ، لكن بالنسبة لـ 0.14.x عملت على حلها عن طريق إضافة هذه السمات إلى القاموس الذي تم تصديره بواسطة react/lib/SVGDOMPropertyConfig قبل استيراد react / react-dom لأول مرة بحد ذاتها. على سبيل المثال:

// 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

بينما يعمل هذا ، فإنه ليس واجهة برمجة تطبيقات مكشوفة رسميًا وقد ينكسر في أي إصدار ثانوي أو إصدار تصحيح. يمكنك استخدامه ولكن على مسؤوليتك الخاصة. إذا كان هناك شيء لا يزال مفقودًا ، يرجى العمل معنا حتى نضيفه. يسعدني معرفة أنه ليس لديك مشكلات مع 15 RC2.

نعم بالتأكيد. أنا أستخدم ذلك فقط حتى يخرج 15 من حالة RC.

سعيد جدًا بدعم SVG الكامل (تقريبًا) في الإصدار 15.0 ولكني أدرك أن بعض السمات التي تحتوي على أسماء مثل xmlns و xmlnsXlink لا يمكن تطبيقها عند التقديم ، وهذا جيد عند العرض svg في المتصفح.

إذا كنت ترغب في إنشاء صورة .svg فهذه السمات ضرورية.

ReactDOMServer.renderToStaticMarkup(<MyCustomSVG />)

لذا فإن القيام بالكود أعلاه ، لن يعمل.

ربما يرتبط بحقيقة أن:

... بفضل استخدام document.createElement ، لم نعد بحاجة إلى الاحتفاظ بقائمة من علامات SVG ، لذا فإن أي علامات SVG لم تكن مدعومة سابقًا يجب أن تعمل بشكل جيد في React 15

وليس document.createElementNS .

وليس document.createElementNS.

منشور المدونة مبسط إلى حد ما ، ولكن يتم استخدام createElementNS عندما نكون تحت علامة <svg> . إذا لم يحدث هذا ، هل يمكنك تقديم مشكلة منفصلة تصف المشكلة ، باستخدام JSFiddle الذي يعيد إنتاجها؟ شكرا!

شكرا لكgaearon. أعتقد أن هذا يحدث عند عرض svg في المتصفح من خلال ReactDOM . ربما تتعلق المشكلة بـ ReactDOMServer .

هذا قلم يعرض SVG الذي تم عرضه والرمز الذي تم إنشاؤه من خلال renderToStaticMarkup() حيث يفتقد على الأقل xmlNS و xmlnsXlink attrs.

إذا كان الأمر كذلك ، يمكنني تقديم هذه المشكلة بشكل منفصل.

نعم ، xmlns و xmlns:Xlink مفقودان. https://github.com/facebook/react/pull/6471 لديه بعض الأعمال الجارية لإضافته.

ما زلت لا أرى <animate> و <animateTransform> في قائمة العلامات المدعومة. هل من سبب اخترت عدم دعمه؟

تضمين التغريدة

يتم دعم جميع العلامات الآن. تخبر القائمة فقط العلامات المدعومة بوظائف المصنع React.DOM.* :

عناصر SVG التالية مدعومة في React.DOM. *:

(التركيز لي)

إذا كنت تستخدم JSX ، فلا داعي للقلق بشأن هذا على الإطلاق - ستعمل كتابة <animate> و <animateTransform> فقط لأن JSX لا تعتمد على React.DOM.* المصانع.

حتى إذا كنت لا تستخدم JSX ، يمكنك استخدام React.createElement('animate', ...) الذي سيعمل بشكل جيد ، أو إنشاء وظيفة المصنع الخاصة بك: var animate = React.createFactory('animate") .

+1 لإضافة دعم لـ xmlns .... في هذه الأثناء ، إذا كان أي شخص مهتمًا بحل بديل (وهو ما كنت أحتاجه لأتمكن من دعم IE9-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}}/>