এসভিজিতে এসভিজি এম্বেড করবেন?

Question 1

আমার একটি এসভিজি ডকুমেন্ট রয়েছে এবং আমি এর মধ্যে একটি বাহ্যিক এসভিজি চিত্র অন্তর্ভুক্ত করতে চাই, অর্থাত এমন কিছু:

<object data="logo.svgz" width="100" height="100" x="200" y="400"/>

("অবজেক্ট" কেবল একটি উদাহরণ - বাইরের ডকুমেন্টটি এক্সএইচটিএমএল এর পরিবর্তে এসভিজি হবে)।

কোন ধারনা? এটা কি সম্ভব? বা আমার বাইরের এসভিজি ডকুমেন্টে কেবলমাত্র लोगो.svg xML- কে চড় মারার জন্য আমার পক্ষে সেরা জিনিস?

Question 2

imageউপাদানটি ব্যবহার করুন এবং আপনার এসভিজি ফাইলটি উল্লেখ করুন। মজাদার জন্য, নিম্নলিখিত হিসাবে সংরক্ষণ করুন recursion.svg:

<svg width="100%" height="100%" viewBox="-100 -100 200 200" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <circle cx="-50" cy="-50" r="30" style="fill:red" />
  <image x="10" y="20" width="80" height="80" href="recursion.svg" />
</svg>

Question 3

অথবা আপনি প্রকৃতপক্ষে এই জাতীয় পিতামাতার মধ্যে এসডিজি এম্বেড করতে পারেন:

<svg>
    <g>
        <svg>
            ...
        </svg>
    </g>
</svg>

ডেমো:
http://hitokun-s.github.io/old/demo/path-between-two-svg.html

Question 4

এটি উল্লেখযোগ্য যে আপনি যখন এসভিজিগুলিকে অন্য এসভিজিতে এম্বেড করেন:

<image x="10" y="20" width="80" height="80" xlink:href="image.svg" />

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

এর অর্থ হ'ল, যদি আপনার এমবেডড এসভিজিটি একটি বৃত্ত বা বর্গক্ষেত্রের বাইরে অন্য কোনও আকার হয়, তবে এটি স্বচ্ছতার সাথে একটি স্কোয়ারে পরিণত হয়। অতএব, মাউস ইভেন্টগুলি সেই এমবেড করা স্কোয়ারের মধ্যে আটকা পড়ে এবং পিতামহীন এসভিজিতে পৌঁছায় না। এর জন্য সতর্কতা অবলম্বন করুন।

আরও ভাল পদ্ধতির একটি প্যাটার্ন ব্যবহার করা হয়। একটি আকার পূরণ করতে, হয় একটি বৃত্ত, একটি বর্গ বা এমনকি একটি পাথ।

<defs>
 <pattern id="pat" x="0" y="0" width="500" height="500" patternUnits="userSpaceOnUse">
   <image x="0" y="0" width="500" height="500" xlink:href="images/mysvg.svg"></image>
 </pattern>
</defs>

তারপরে এই প্যাটার্নটি ব্যবহার করুন:

<circle cx="0" cy="0" r="250" fill="url(#pat)"></circle>

এখন আপনার মাউস ইভেন্টগুলি স্বচ্ছ চিত্র স্কোয়ারে আটকে না!

Question 5

আমি দেখতে পেয়েছি যে <image>ট্যাগটি ব্যবহার করে এম্বেড করা ফাইলের একটি নিম্ন-মানের রেন্ডার দেওয়া হয়েছিল। তবে নিম্নলিখিত কৌশলটি কাজ করেছে (কোনও এসভিজি ফাইলের মধ্যে কোনও এসভিজি ফাইল এম্বেড করার জন্য - কোনও এইচটিএমএল পৃষ্ঠায় রেন্ডার করার জন্য অগত্যা নয়):

একটি পাঠ্য সম্পাদকে এসভিজি ফাইল সম্পাদনা করুন।

মেটাডেটার শেষ সন্ধান করুন:

</metadata>
  <g
   id="layer1"
   inkscape:groupmode="layer"
   inkscape:label="Layer 1">

এই গ্রুপ ট্যাগের পরে এই লাইনটি সন্নিবেশ করান:
```
<use xlink:href="OTHERFILE.svg#layer1" y="0" x="0" />
```
এই ক্ষেত্রে আমরা ফাইলের মধ্যে OTHERFILE.svg এবং লেয়ার 1 (প্রথম এবং ডিফল্ট স্তর) সমস্ত অন্তর্ভুক্ত করছি।
এটি সংরক্ষণ করুন এবং তারপরে ফাইলটি ইনসকেপে খুলুন।

এই কৌশলটি প্রতিটি পৃষ্ঠায় একটি স্ট্যান্ডার্ড ব্যাকগ্রাউন্ড বা লোগো থাকার জন্য দরকারী। ফাইলটিতে এটি প্রথমে রাখার পরে এটি প্রথমে রেন্ডার হবে (এবং এভাবে নীচে থাকবে)। আপনি এই বৈশিষ্ট্যটি যুক্ত করে এটিকে লকও করতে পারেন:

sodipodi:insensitive="true"

অন্য কথায়:

<use xlink:href="OTHERFILE.svg#layer1" sodipodi:insensitive="true" y="0" x="0" />

Question 6

নোটটি অবহেলাxlink:href করা হয়েছে , কেবল পরিবর্তে ব্যবহার করুন, উদাহরণস্বরূপhref

<svg viewBox="0 0 512 512">
  <image width="512" height="512" href="external.svg"/>
</svg>

viewBox, widthএবং heightমানগুলি (এই উত্তরে) কেবল চিত্রের উদ্দেশ্যে, সেই অনুসারে বিন্যাসটি সামঞ্জস্য করুন ( আরও পড়ুন )।

যেহেতু <image> শেয়ার অনুরূপ বৈশিষ্ট যেমন <img>অর্থাত করা SVG স্টাইলিং সমর্থন করে না, যেমন উল্লেখ ক্রিশ্চিয়ান এর উত্তর । উদাহরণস্বরূপ, যদি আমার কাছে নিম্নলিখিত সিএসএস লাইন থাকে যা এসভিজি শেপ রঙ ফন্টের রঙের মতোই সেট করে,

svg {
  fill: currentColor;
}

উপরের স্টাইলটি <image>ব্যবহার করা হয় না যদি প্রয়োগ করা হয়। তার জন্য, আপনার ব্যবহার করতে হবে <use>, নিক এর উত্তরে দেখানো হয়েছে ।

তার উত্তরে নোট id="layer1"এবং href="OTHERFILE.svg#layer1"মানগুলি বাধ্যতামূলক ।

এর অর্থ আপনাকে idবাহ্যিক এসভিজি ফাইলে গুণটি যুক্ত করতে হবে, সুতরাং আপনাকে নিজের (নিজের ওয়েবসাইট) বা অন্য কোথাও বাহ্যিক এসডিজি ফাইলটি সংশোধন করতে হবে। ফলস্বরূপ বাহ্যিক এসভিজি ফাইলটি দেখতে দেখতে (আমি যেখানে রেখেছি তা লক্ষ্য করুন id):

<svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path d="..."/>
</svg>

আইডির মান যে কোনও হতে পারে, আমি এই উদাহরণে "লোগো" ব্যবহার করি।

এম্বেড এম্বেড করতে,

<svg viewBox="0 0 512 512">
  <use href="edited-external.svg#logo"/>
</svg>

যদি আপনি উপরের এসটিজিটি আপনার এইচটিএমএলটিতে ইনলাইন হিসাবে ব্যবহার করেন তবে আপনার এক্সএমএলএনস অ্যাট্রিবিউটের প্রয়োজন নেই (কমপক্ষে আমি এসভিগো থেকে যা জানি )।

Question 7

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

কেবল ফায়ারফক্স নেস্টেড এসভিজি উপাদানগুলিতে "রূপান্তর" বৈশিষ্ট্যটিকে সমর্থন করে। <চিত্র> এর রঙ পরিবর্তন করাও সম্ভব নয়। সুতরাং উভয়ের সমন্বয় প্রয়োজন ছিল।

আমি যা করে শেষ করেছি তা নিম্নরূপ ছিল

<svg>
  <image x="0" y="0" xlink:href="data:image/svg+xml;base64,[base64 of nested svg]"></image>
</svg>

এটি কমপক্ষে ফায়ারফক্স, ক্রোম এবং ইনস্কেপে কাজ করে।

এটি এখন পিতা-মাতার এসভিজি উত্তরে শিশু এসভিগের মতো একই আচরণ করে যে ব্যতিক্রম আপনি এখন এটিতে রূপান্তর প্রয়োগ করতে পারেন।