রিভ্যাক্টজেএসে এসভিজি এম্বেড করা হচ্ছে

Question

একটি রিঅ্যাকটিজেএস উপাদানগুলিতে এসভিজি মার্কআপ এম্বেড করা সম্ভব?

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

ত্রুটির ফলাফল:

নেমস্পেসের বৈশিষ্ট্যগুলি সমর্থিত নয়। ReactJSX এক্সএমএল নয়।

এটি করার সবচেয়ে হালকা উপায় কী। প্রতিক্রিয়া এআরটি এর মতো কিছু ব্যবহার করা আমি যা করার চেষ্টা করছি তার জন্য উপায় ওভারকিল।

Comments

আপনি কি একটি জেসবিন তৈরি করতে পারেন? এটি আপনার খোলার এসভিজি ট্যাগটিকে কেবল <svg id="Layer_1">(বা আরও ভাল, আইডি ছাড়াই) পরিবর্তন করার মতো সহজ হতে পারে । : সম্পাদনা: এখানে একটি উদাহরণ jsbin.com/nifemuwi/2/edit?js,output

— রাহাজান

@ ফেকরাইনব্রিগান্ড ধন্যবাদ! এই ক্ষেত্রে এটি ছিল সহজ। বেন এর উত্তর দেখুন যদিও। আপনি যখন প্রয়োজন তখন জেএসএক্স পার্সিংয়ের কাছাকাছি যেতে পারেন তা জেনে রাখা ভাল।

— নিকোলাস

Answer 1

আপডেট 2016-05-27

রিঅ্যাক্ট ভি 15 হিসাবে, এসভিজি ( উত্স ) এর জন্য বর্তমান ব্রাউজার সমর্থন সহ 100% প্যারিটির সাথে রিঅ্যাক্টে এসভিজির জন্য সমর্থন (কাছে??) 100% সমতা রয়েছে । আপনার জেএসএক্সকে সামঞ্জস্যপূর্ণ করতে আপনাকে কিছু সিনট্যাক্স রূপান্তর প্রয়োগ করতে হবে, যেমন আপনাকে এইচটিএমএল ( 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>
    );
}

কোডিং ডেমো কাজ করছে

সুনির্দিষ্ট সমর্থনের বিষয়ে আরও তথ্যের জন্য ডক্সের সমর্থিত এসভিজি বৈশিষ্ট্যগুলির তালিকা পরীক্ষা করুন । এবং এখানে (বর্তমানে বন্ধ) গিটহাব ইস্যুটি যা নামস্পেস এসভিজি বৈশিষ্ট্যের জন্য সমর্থনকে ট্র্যাক করে support

---

পূর্ববর্তী উত্তর

আপনি dangerouslySetInnerHTMLকেবল নেমস্পেসের বৈশিষ্ট্য বাদ দিয়ে কোনও সাধারণ এসভিজি এম্বেড করতে পারেন । উদাহরণস্বরূপ, এটি কাজ করে:

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

কোন মুহুর্তে আপনি প্রপস যুক্ত করতে fillবা কনফিগার করার জন্য দরকারী অন্য যে কোনও বিষয় সম্পর্কে ভাবতে পারেন ।

Comments

@ চিননসো চুকউইগোর দুর্দান্ত প্রশ্ন! আমি জানি না, আমি কখনই রিএ্যাক্ট নেটিভ ব্যবহার করি নি। আপনি কি একবার যেতে দিয়েছেন?

— অ্যান্ড্রু প্যাটন 1

@ অ্যান্ড্রুপ্যাটন একাধিক CSS ক্লাসের নাম টিক চরের সাথে কাজ করে না: ' .class1, .class2{fill: #005baa;}' আমি কীভাবে এটি ঠিক করতে পারি?

— হ্যালো ওয়ার্ল্ড

@ হেলো ওয়ার্ল্ড আপনি কি আমাকে উদাহরণ দিতে পারেন যেখানে এটি কাজ করে না? আমি কেবলমাত্র আমার মূল ডেমোটি যুক্ত করতে চেয়েছিclassB এবং এটি কাজ করেছে: codepen.io/acusti/pen/BVJzNg

— অ্যান্ড্রু প্যাটন

ধন্যবাদ, এর থেকে শুরু করে আমি কোনও লোডার ছাড়াই ফাইল থেকে একটি এসজিজি আমদানি করতে সক্ষম হয়েছি, আমি সবেমাত্র removed `` xMLns: osb = " openswatchbook.org/uri/2009/osb " থেকে removed `` সরিয়েছি শুধুমাত্র xlmns রেখে এসভিজি ট্যাগ। এটি দৃশ্যত ট্যাগ বিশ্লেষণ সম্পর্কে। : শুধু ক্ষেত্রে, আমি এই পদক্ষেপগুলি অনুসরণ করেছেন পাশাপাশি blog.logrocket.com/how-to-use-svgs-in-react

— ঢালাইকর

Answer 2

আপনার যদি কেবলমাত্র একটি স্ট্যাটিক এসভিজি স্ট্রিং রয়েছে যা আপনি অন্তর্ভুক্ত করতে চান তবে আপনি এটি ব্যবহার করতে পারেন dangerouslySetInnerHTML:

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

এবং প্রতিক্রিয়া একেবারেই প্রক্রিয়াজাত না করে সরাসরি মার্কআপকে অন্তর্ভুক্ত করবে।

Comments

আমি প্রতিক্রিয়া ব্যবহার করে এসভিজির অভ্যন্তরে কয়েকটি পাথ নিয়ন্ত্রণ করছি, তবে প্রতিক্রিয়া ফিল্টার উপাদানগুলিকে সমর্থন করে বলে মনে হচ্ছে না। এটি সমর্থন করার কোন উপায় আছে? বিপজ্জনকভাবে দেখে মনে হচ্ছে সেটআইনার এইচটিএমএল কাজ করবে না কারণ আমি কোনও এসভিজির অভ্যন্তরে স্প্যান রাখতে পারি না এবং আমি এটি ফিল্টারের বৈশিষ্ট্যগুলিকে সেট করতে সেট করতে পারি না। আমি মনে করি না স্বাভাবিক হিসাবে প্রতিক্রিয়াশীল উপাদান তৈরি করার কোনও উপায় আছে তবে সেগুলি ডিওএম উপাদানগুলিতে সমস্ত বৈশিষ্ট্যকে ভারব্যাটিক দিয়ে দেয়?

— অ্যান্ডি

২০১২ সালের হিসাবে, মনে হচ্ছে আপনি বিপজ্জনকভাবে সেটআইনার এইচটিএমএল ব্যবহার করতে পারেন তবে তবুও আমি বিপজ্জনকভাবে সেটআইনার এইচটিএমএল ব্যবহার করে ক্রোমে কাজ করতে ছায়া ফিল্টার তৈরি করতে পারিনি, তবে এটি ফায়ারফক্সে কাজ করছে।

— 21

Answer 3

একটি প্রতিক্রিয়া বিকাশকারী এর মতে আপনার নেমস্পেস xMLns দরকার নেই। আপনার যদি প্রয়োজন হয় অ্যাট্রিবিউটxlink:href আপনি 0.14 প্রতিক্রিয়া থেকে xlinkHref ব্যবহার করতে পারেন

উদাহরণ

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

Answer 4

আপনি যদি এটি কোনও ফাইল থেকে লোড করতে চান তবে আপনি প্রতিক্রিয়া-ইনলাইনসভিজি ব্যবহার করার চেষ্টা করতে পারেন - এটি বেশ সহজ এবং সোজা-এগিয়ে।

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>