এম্বেড থাকা এসভিজিতে কীভাবে কোনও স্টাইল প্রয়োগ করবেন?

107

<svg>ট্যাগ ব্যবহার করে কোনও এসভিজি সরাসরি কোনও নথিতে অন্তর্ভুক্ত করা হয় , আপনি নথির স্টাইলশিটের মাধ্যমে এসভিজিতে সিএসএস শৈলী প্রয়োগ করতে পারেন। যাইহোক, আমি একটি এসভিজিতে শৈলী প্রয়োগ করার চেষ্টা করছি যা এমবেড করা ( <object>ট্যাগ ব্যবহার করে )।

নিম্নলিখিত কোড মত কিছু ব্যবহার করা সম্ভব?

object svg { 
    fill: #fff; 
}

html css svg

— জোশুয়া সোর্টিনো
সূত্র

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

— ড্রু বেকার

এখানে একটি উত্তর যে আসলে কাজ পায় (থেকে CSS এর সঙ্গে বাইরের SVG ফাইল শৈলী বৈশিষ্ট্য সাধিত ।)

— Fabien Snauwaert

উত্তর:

108

সংক্ষিপ্ত উত্তর: না, যেহেতু শৈলীগুলি নথির সীমা জুড়ে প্রযোজ্য নয়।

তবে, যেহেতু আপনার একটি <object>ট্যাগ রয়েছে আপনি স্ক্রিপ্ট ব্যবহার করে স্টাইলশিটটি এসভিজি নথিতে সন্নিবেশ করতে পারেন।

এর মতো কিছু এবং নোট করুন যে এই কোডটি ধরে নিয়েছে যে <object>সম্পূর্ণরূপে লোড হয়েছে:

var svgDoc = yourObjectElement.contentDocument;
var styleElement = svgDoc.createElementNS("http://www.w3.org/2000/svg", "style");
styleElement.textContent = "svg { fill: #fff }"; // add whatever you need here
svgDoc.getElementById("where-to-insert").appendChild(styleElement);

<link>বাহ্যিক স্টাইলশিটের রেফারেন্স দেওয়ার জন্য কোনও উপাদান sertোকানোও সম্ভব:

var svgDoc = yourObjectElement.contentDocument;
var linkElm = svgDoc.createElementNS("http://www.w3.org/1999/xhtml", "link");
linkElm.setAttribute("href", "my-style.css");
linkElm.setAttribute("type", "text/css");
linkElm.setAttribute("rel", "stylesheet");
svgDoc.getElementById("where-to-insert").appendChild(linkElm);

তবুও অন্য বিকল্পটি হ'ল প্রথম পদ্ধতিটি ব্যবহার করে কোনও শৈলীর উপাদান সন্নিবেশ করা এবং তারপরে একটি @ আমদানি বিধি যুক্ত করা, যেমন styleElement.textContent = "@import url(my-style.css)"।

অবশ্যই আপনি কোনও স্ক্রিপ্টিং না করেই সরাসরি এসজিজি ফাইল থেকে স্টাইলশিটের সাথে লিঙ্ক করতে পারেন। নিম্নলিখিতগুলির যে কোনও একটিতে কাজ করা উচিত:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="my-style.css" type="text/css"?>
<svg xmlns="http://www.w3.org/2000/svg">
  ... rest of document here ...
</svg>

বা:

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <link href="my-style.css" type="text/css" rel="stylesheet" 
          xmlns="http://www.w3.org/1999/xhtml"/>
  </defs>
  ... rest of document here ...
</svg>

2015 আপডেট করুন: আপনি এমবেডড এসভিজিতে জেএস স্ক্রিপ্ট এবং সিএসএস স্টাইল প্রয়োগ করতে jquery-svg প্লাগইন ব্যবহার করতে পারেন ।

— এরিক ডাহলস্ট্রোম
সূত্র

এটি কি কোনও বাহ্যিক স্টাইলশিটকে লিঙ্ক করার পদ্ধতি? যদি না হয়, তা কি সম্ভব?

— জোশুয়া সোর্টিনো

উপরেরটি এসভিজিতে একটি শৈলী উপাদান সন্নিবেশ করায়। হ্যাঁ বাহ্যিক স্টাইলশিটের সাথে লিঙ্ক করার জন্য একটি এক্সএইচটিএমএল লিঙ্ক উপাদান সন্নিবেশ করা সম্ভব, বা সম্ভবত কোনও এক্সএমএল-স্টাইলশীট প্রসেসিং নির্দেশ ( ডাব্লু 3.org / স্টাইল / স্টাইলিং- এক্সএমএল এইচটিএমএল দেখুন )।

— এরিক ডাহলস্ট্রোম

এটি দুর্দান্ত ভয়ঙ্কর এরিক! যাইহোক, আমি svgweb: কোড. google.com/p/svgweb না যুক্ত ক্রোমে কাজ করার জন্য এই কৌশলটি পরিচালনা করতে পারি না ... কোনও ধারণা কি আমি ভুল করছি?

— ম্যাট ডাব্লুডি

@ ম্যাটডাব্লু- ডি: আপনার সম্ভবত এটির জন্য একটি নতুন প্রশ্ন খোলার উচিত। ক্রোমে Svgweb প্রয়োজন হয় না।

— এরিক ডালস্ট্রোম

থ্যাঙ্কস ইউ এরিক, এসএসজি-র মাধ্যমে এসএসজি-র মাধ্যমে ফন্ট-ফেস পাওয়ার জন্য সত্যিকার অর্থে লড়াই করার চেষ্টা করছিলেন, এসএসজি-র সাথে সিএসএসকে যুক্ত করে প্রথমে চেষ্টা করলেন এবং অলৌকিকভাবে ব্রাউজারটি অতিক্রম করলেন!

— ডেভ

আপনি এসভিজি ফাইলের অভ্যন্তরে নিজের স্টাইলগুলির সাথে স্টাইল ব্লক রেখে জাভাস্ক্রিপ্ট ছাড়াই এটি করতে পারেন।

<style type="text/css">
 path,
 circle,
 polygon { 
    fill: #fff; 
  }
</style>

— আর রেভলে
সূত্র

যদি এসভিজিকে ইনক্লুড করতে ট্যাগটি ব্যবহারের একমাত্র কারণ আপনি যদি নিজের উত্স কোডটি এসভিজি থেকে মার্কআপ দিয়ে বিশৃঙ্খলা করতে চান না তবে আপনার এসভিজিআইএনজেক্টের মতো এসভিজি ইনজেক্টরগুলির দিকে নজর দেওয়া উচিত ।

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

<html>
<head>
  <script src="svg-inject.min.js"></script>
</head>
<body>
  <img src="image.svg" onload="SVGInject(this)" />
</body>
</html>

— Waruyama
সূত্র

অসাধারণ! পরিষ্কার সরঞ্জামের জন্য ধন্যবাদ।

— ডিলিপ্লেস