এসভিজি ট্যাগ এবং রিএ্যাকটিজেএস ব্যবহার করে

Question

তাই সাধারণত আমার বেশিরভাগ এসভিজি আইকনগুলিতে অন্তর্ভুক্ত করার জন্য যা সাধারণ স্টাইলিংয়ের প্রয়োজন, আমি তা করি:

<svg>
    <use xlink:href="/svg/svg-sprite#my-icon" />
</svg>

এখন আমি ReactJS সঙ্গে বাজানো হয়েছে প্রয়াত আমার নতুন ফ্রন্ট-এন্ড উন্নয়ন স্ট্যাকের মধ্যে একটি সম্ভাব্য উপাদান হিসাবে এটা মূল্যায়ন তবে আমি যে সমর্থিত ট্যাগ / গুণাবলীর তার তালিকায় খেয়াল, তন্ন তন্ন হিসাবে useবা xlink:hrefসমর্থিত।

এসএজিজি স্প্রিট ব্যবহার এবং রিয়্যাকটিজেএসে এগুলি লোড করা কি সম্ভব?

Comments

ভবিষ্যতের দর্শকদের জন্য, আপনি এখন ব্যবহার করতে পারেন <use xlinkHref="/svg/svg-sprite#my-icon" />।

— ডেভিড গিলবার্টসন

xlink:hrefঅবহিত করা হয়েছে, এখন কেবল ব্যবহার করার কথা href- ডেভেলপার.মোজিলা.আর.ইন.ইউএস

— ম্যাট গ্রেয়ার

@ ম্যাটগ্রিয়ার 2018 হিসাবে, সাফারিটির এখনও দরকার xlink:hrefতাই আমাদের এখনও এটি ব্যবহার করা দরকার। প্রকৃত ওয়েব অ্যাপ্লিকেশনগুলিকে হয় ব্রাউজারের বৈশিষ্ট্যগুলির সাধারণ ডিনোমিনেটর ব্যবহার করা বা নির্দিষ্ট ওয়ার্কআরউন্ডস / পলিফিলগুলি প্রয়োগ করতে হবে।

— টোবিয়া

এই ত্রুটিটি অনুসন্ধান করা অন্যদের সহায়তা করার জন্য আমি এই মন্তব্যটি যুক্ত করছি, যা নীচে জন সারেলের উত্তর দ্বারা সমাধান করা হয়েছিল:Property 'xlink' does not exist on type 'SVGProps<SVGImageElement>

— জো এম

Answer 1

সেপ্টেম্বর 2018 আপডেট করুন : এই সমাধানটি অবচিত করা হয়েছে, পরিবর্তে জনের উত্তর পড়ুন ।

-

প্রতিক্রিয়া আপনি যেমনটি বলেছেন তেমন সমস্ত এসভিজি ট্যাগ সমর্থন করে না, এখানে সমর্থিত ট্যাগগুলির একটি তালিকা রয়েছে । তারা এই টিকিটে আরও বিস্তৃত সমর্থন, f.ex এ কাজ করছে ।

একটি সাধারণ কাজটি হ'ল এইচটিএমএল ইনজেক্ট করা হয় পরিবর্তে অ-সমর্থিত ট্যাগগুলির জন্য, f.ex:

render: function() {
    var useTag = '<use xlink:href="https://stackoverflow.com/svg/svg-sprite#my-icon" />';
    return <svg dangerouslySetInnerHTML={{__html: useTag }} />;
}

Comments

না, ব্যবহার করবেন না dangerouslySetInnerHTML। আপনি xlinkHrefনীচে উল্লিখিত হিসাবে ব্যবহার করতে পারেন ।

— টোবিয়া

লেখকের সম্ভবত এটি গ্রহণযোগ্য উত্তর হিসাবে মুছে ফেলা উচিত

— অ্যাকোয়াসার

Answer 2

এমডিএন বলছে যে xlink:href এটি অনুকূলে রয়েছে href। আপনার hrefসরাসরি বৈশিষ্ট্যটি ব্যবহার করতে সক্ষম হওয়া উচিত । নীচের উদাহরণে উভয় সংস্করণ অন্তর্ভুক্ত।

এর মতো প্রতিক্রিয়া 0.14 , xlink:hrefসম্পত্তি হিসাবে প্রতিক্রিয়া মাধ্যমে উপলব্ধ xlinkHref। এটি 0.14 এর জন্য প্রকাশিত নোটগুলিতে একটি "উল্লেখযোগ্য বর্ধন" হিসাবে উল্লেখ করা হয়েছে ।

<!-- REACT JSX: -->
<svg>
  <use xlinkHref='/svg/svg-sprite#my-icon' />
</svg>

<!-- RENDERS AS: -->
<svg>
  <use xlink:href="/svg/svg-sprite#my-icon"></use>
</svg>

2018-06-09 আপডেট করুন:href বনাম xlink:hrefবৈশিষ্ট্যাবলী এবং উভয়কে অন্তর্ভুক্ত করার জন্য আপডেট করা উদাহরণ সম্পর্কে তথ্য যুক্ত করা হয়েছে। ধন্যবাদ @ ডিভাক্সার

আপডেট 3 : লেখার সময়, প্রতিক্রিয়ার মাস্টার এসভিজির বৈশিষ্ট্যগুলি এখানে পাওয়া যাবে ।

আপডেট 2 : এটি উপস্থিত হয় যে সমস্ত এসভিজি বৈশিষ্ট্যগুলি এখন রিঅ্যাক্টের মাধ্যমে পাওয়া উচিত (মার্জড এসভিজি অ্যাট্রিবিউট পিআর দেখুন )।

আপডেট 1 : আপনি অতিরিক্ত এসভিজি সমর্থন অবতরণের জন্য গিটহাবের এসভিজি সম্পর্কিত ইস্যুতে নজর রাখতে পারেন want কাজকর্মের বিভিন্ন অগ্রগতি রয়েছে।

ডেমো:

const svgReactElement = (
  <svg
    viewBox="0 0 1340 667"
    width="100"
    height="100"
  >
    <image width="667" height="667" href="https://i.imgur.com/w7GCRPb.png"/>
    { /* Deprecated xlink:href usage */ }
    <image width="667" height="667" x="673" xlinkHref="https://i.imgur.com/w7GCRPb.png"/>
  </svg>
);

var resultHtml = ReactDOMServer.renderToStaticMarkup(svgReactElement);
document.getElementById('render-result-html').innerHTML = escapeHtml(resultHtml);

ReactDOM.render(svgReactElement, document.getElementById('render-result') );

function escapeHtml(unsafe) { return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;"); }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.1/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom-server.browser.development.js"></script>

<h2>Render result of rendering:</h2>
<pre>&lt;svg
  viewBox=&quot;0 0 1340 667&quot;
  width=&quot;100&quot;
  height=&quot;100&quot;
&gt;
  &lt;image width=&quot;667&quot; height=&quot;667&quot; href=&quot;https://i.imgur.com/w7GCRPb.png&quot;/&gt;
  { /* Deprecated xlink:href usage */ }
  &lt;image width=&quot;667&quot; height=&quot;667&quot; x=&quot;673&quot; xlinkHref=&quot;https://i.imgur.com/w7GCRPb.png&quot;/&gt;
&lt;/svg&gt;</pre>

<h2><code>ReactDOMServer.renderToStaticMarkup()</code> output:</h2>
<pre id="render-result-html"></pre>
<h2><code>ReactDOM.render()</code> output:</h2>
<div id="render-result"></div>

Comments

> 25 ডিসেম্বর 2015 আপডেট করুন: দেখা যাচ্ছে যে সমস্ত এসভিজি বৈশিষ্ট্যগুলি এখন প্রতিক্রিয়াটির মাধ্যমে পাওয়া উচিত (মার্জড এসভিজি অ্যাট্রিবিউট পিআর দেখুন)। এই এসভিজি বৈশিষ্ট্যগুলি ব্যবহার করার কোনও মানক উপায় নেই? Xlink: href => xlinkHref এর মতো কি তারা সবাই উটের মতো মামলা করবে?

— মেজর বামমার

@ মজোরবুমার এখানে একবার

— জোন সারেল

এটি সত্যই সঠিক উত্তর হওয়া দরকার, বিশেষ করে যখন বর্তমান নির্বাচিত উত্তর বিপজ্জনকভাবে

— সেটআইটনার এইচটিএমএলকে

এমডিএন অনুসারে ( developer.mozilla.org/en-US/docs/Web/SVG/Atribute/xlink:href ), xlink:hrefঅবচয় করা হয়েছে, এবং hrefনাম স্থান উপসর্গ ব্যতীত এই পরামর্শটি ব্যবহার করা উচিত । (দ্রষ্টব্য, তবে আপনি যদি টাইপস্ক্রিপ্ট ব্যবহার করে থাকেন তবে টাইপগুলি এখনও এটি প্রতিবিম্বিত করার জন্য আপডেট করা হয়নি))

— ডিভাক্সার

লেখার সময়, xlink: href সাফারিতে সমর্থিত, তবে href হয় না।

— নিওনক्यूब

Answer 3

আপনি সম্মুখীন হলে xlink:href, তাহলে আপনি কোলন সরানোর যোগ টেক্সট camelcasing দ্বারা ReactJS মধ্যে সমতুল্য পেতে পারেন: xlinkHref।

আপনি সম্ভবত শেষ পর্যন্ত এসভিজিতে অন্যান্য নেমস্পেস-ট্যাগগুলি ব্যবহার করবেন xml:space.. একই বিধিটি তাদের ক্ষেত্রে প্রযোজ্য (অর্থাত্ xml:spaceহয়ে যায় xmlSpace)।

Answer 4

জোন সেরেলের উত্তরে যেমন ইতিমধ্যে বলা হয়েছে, ব্যবহারের ট্যাগগুলি এখন সমর্থিত। আপনি যদি জেএসএক্স ব্যবহার না করে থাকেন তবে আপনি এটি এর মতো প্রয়োগ করতে পারেন:

React.DOM.svg( { className: 'my-svg' },
    React.createElement( 'use', { xlinkHref: '/svg/svg-sprite#my-icon' }, '' )
)

Answer 5

আমি একটি সামান্য সহায়ক তৈরি করেছি যা এই সমস্যাটি নিয়ে কাজ করে: https://www.npmjs.com/package/react-svg-use

প্রথমে npm i react-svg-use -Sতারপর সহজভাবে

import Icon from 'react-svg-use'

React.createClass({
  render() {
    return (
      <Icon id='car' color='#D71421' />
    )
  }
})

এবং এটি নীচের মার্কআপটি উত্পন্ন করবে

<svg>
  <use xlink:href="#car" style="fill:#D71421;"></use>
</svg>

Answer 6

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

import React from 'react';
import {ReactComponent as ReactIcon} from './icon.svg';

const App = () => {
  return (
    <div className="App">
      <ReactIcon />
    </div>
  );
}
export default App;