আমি কি কোনও এসএসজি পাথের সিএসএসের মাধ্যমে রঙের রঙটি পরিবর্তন করতে পারি?

Question

আমার কাছে নিম্নলিখিত কোড রয়েছে:

  <span>
     <svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.0166626px; top: -0.983337px;">
        <desc></desc>
        <defs/>
        <path style="" fill="#333333" stroke="none" d="M15.985,5.972C8.422,5.972,2.289999999999999,10.049,2.289999999999999,15.078C2.289999999999999,17.955,4.302999999999999...............1,27.68,22.274Z"/>
      </svg>&nbsp;
  </span>

এসএসজিজি পাথের পূরণের রঙটি কি সিএসএস বা অন্য কোনও উপায়ে প্যাথ ট্যাগের অভ্যন্তরে পরিবর্তন না করেই পরিবর্তন করা সম্ভব?

Comments

সম্পর্কিত উত্তর

— Izhaki

আজকাল, আপনি অন্তর্ভুক্ত করতে পারেন এবং এর মাধ্যমে শৈলী বহিরাগত ফাইল <symbol>এবং <use>। এই উত্তর দেখুন ।

— টটিমেডলি

Answer 1

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

​path {
    fill: blue;
}​

বাহ্যিক সিএসএস পাথের fillবৈশিষ্ট্যটিকে ওভাররাইড করে প্রদর্শিত হবে , কমপক্ষে ওয়েবকিট এবং গেকো-ভিত্তিক ব্রাউজারগুলিতে আমি যা পরীক্ষা করেছি। অবশ্যই, যদি আপনি লিখেন, বলুন, <path style="fill: green">তবে এটি বাহ্যিক CSSকেও ওভাররাইড করবে।

Comments

এটি কি এখনও ক্রোমের সাথে কাজ করে? সিএসএসের সাহায্যে আমার এসভিজি পাথের রঙ পরিবর্তন করার চেষ্টা করতে আমার অসুবিধা হচ্ছে।

— ডালাস ক্লার্ক

ধন্যবাদ নিকোলাস, আমি বিশ্বাস করি কারণ আমি খুঁজে পেয়েছি। আমার এসভিজি একটি <img> ট্যাগের মাধ্যমে পৃষ্ঠাটিতে এম্বেড করা হয়েছিল, সিএসএস এর মধ্যে কোনও সামগ্রী পরিবর্তন করতে সক্ষম হবে বলে মনে হয় না। এটা কি সঠিক?

— ডালাস ক্লার্ক

মনে রাখবেন যে এসএসজি স্টাইল করার জন্য সিএসএসের জন্য আপনাকে মার্কআপে এসভিজি কোড অন্তর্ভুক্ত করতে হবে , আপনি <svg>ট্যাগের মাধ্যমে এসভিজি অন্তর্ভুক্ত করলে এটি কার্যকর হয় না ।

— রিকার্ডো জিয়া

@ রিকার্ডোজিয়া এটির পক্ষে একটি সতর্কতা: আপনি একটি বাহ্যিক এসভিজি ফাইলের সাথে কোনও বস্তু অন্তর্ভুক্ত করতে পারেন <use href="external.svg#objId" />এবং আপনার স্থানীয় সিএসএস এখনও কিছুটা ডিগ্রিতে প্রযোজ্য হবে।

— কেন বেলোস

@ কেনবেলো এটি সত্য, আমি এখন তা শিখেছি। একটি বিষয় লক্ষণীয় যে আমাদের এসএসজি নির্দিষ্ট বৈশিষ্ট্যগুলি CSS এ ব্যবহার করা উচিত অন্যথায় এটি কাজ করবে না। উদাহরণস্বরূপ, আপনি fill: #000;পরিবর্তে ব্যাকগ্রাউন্ডের রঙটি ব্যবহার করুন background: #000;।

— রিকার্ডো জিয়া

Answer 2

আপনি যদি উপাদানটিতে ঘোরাফেরা করে রঙ পরিবর্তন করতে চান তবে এটি চেষ্টা করুন:

path:hover{
  fill:red;
}

Answer 3

আপনি যদি কোনও এসভিজি ফাইলের উত্স কোডে যান তবে আপনি পূরণ সম্পত্তিটি পরিবর্তন করে রঙ পূরণ করতে পারবেন।

<svg fill="#3F6078" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
</svg> 

আপনার প্রিয় পাঠ্য সম্পাদকটি ব্যবহার করুন, এসভিজি ফাইলটি খুলুন এবং এটির সাথে খেলুন।

Comments

প্রযুক্তিগতভাবে প্রশ্নের শব্দের উপর ভিত্তি করে সঠিক "... অন্য উপায়গুলি আসলে এটি প্যাথ ট্যাগের অভ্যন্তরে পরিবর্তন না করে" এবং আমার কীভাবে প্রয়োজন ঠিক তা কাজ করেছিল। একটি upvote আছে!

— ট্র্যাভিস ওয়াটসন

এ কেমন উত্তর? প্রশ্নটি

— সিএসএসে

আপনার নিজের জনাব জ্যাস্পারের একটি উত্তর আছে?

— স্যামুয়েল রমজান

এটি উত্তর নয়। এটাই প্রশ্নের বিকৃতি।

— কিউমাস্টার

Answer 4

আপনি এসভিজি সার্কেলের জন্য এই সিএসএস রেখেছেন।

svg:hover circle{
    fill: #F6831D;
    stroke-dashoffset: 0;
    stroke-dasharray: 700;
    stroke-width: 2;
}

Answer 5

আমি সিএসএস-ট্রিক্সে এক বিস্ময়কর সংস্থান পেয়েছি: https://css-tricks.com/used-svg/

সেখানে কয়েকটি মুখ্য সমাধান ব্যাখ্যা করা হয়েছে।

আমি সোর্স এসভিজি-তে ন্যূনতম সম্পাদনাগুলির প্রয়োজনটিকে পছন্দ করেছি এবং এটিও এইচটিএমএল নথিতে এম্বেড করার প্রয়োজন নেই। এই বিকল্পটি <object>ট্যাগটি ব্যবহার করে ।

---

আপনার এইচটিএমএল ব্যবহার করে এসভিজি ফাইল যুক্ত করুন <object>; আমিও এইচটিএমএল বৈশিষ্ট্যাবলী ঘোষিত widthএবং height। এই প্রস্থ এবং উচ্চতাগুলি এসভিজি ডকুমেন্টটি ব্যবহার করে স্কেল করা যায় না, আমি আমার সম্পর্কিত এসভিজি সিএসএস ফাইলে ট্যাগের transform: scale(...)জন্য সিএসএস স্টেটমেন্ট ব্যবহার করে প্রায় কাজ svgকরেছি।

<object type="image/svg+xml" data="myfile.svg" width="64" height="64"></object>

আপনার এসএনএন ডকুমেন্টের সাথে সংযুক্ত করার জন্য একটি সিএসএস ফাইল তৈরি করুন। আমার উত্স এসভিজি পাথটি 16px এ স্কেল করা হয়েছিল, আমি চারটি ফ্যাক্টরের সাহায্যে এটি 64 এ উন্নীত করেছি। এটিতে কেবল একটি পাথ ছিল তাই আমার এটি আরও সুনির্দিষ্টভাবে নির্বাচন করার দরকার পড়েনি, তবে পথটির একটি পূর্ণ বৈশিষ্ট্য ছিল তাই আমাকে !IMPORTANTসিএসএসকে নজির নিতে বাধ্য করার জন্য ব্যবহার করতে হয়েছিল।

#svg2 {
    width: 64px; height: 64px;
    transform: scale(4);
}
path {
    fill: #333 !IMPORTANT;
}

শৈলীপত্র <svgঅন্তর্ভুক্ত করার জন্য, আপনার টার্গেট এসভিজি ফাইলটি খোলার ট্যাগের আগে সম্পাদনা করুন ; নোট করুন যে href svg ফাইল ইউআরএল সম্পর্কিত।

<?xml-stylesheet type="text/css" href="myfile.css" ?>

Answer 6

আপনি এই বাক্য গঠনটি ব্যবহার করতে পারেন তবে এর জন্য এসভিজি ফাইলে কিছু পরিবর্তন প্রয়োজন require এবং নিজেই এসভিজি থেকে যে কোনও ফিল / স্ট্রোক সরিয়ে ফেলুন।

icon.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<!-- use symbol instead of defs and g, 
  must add viewBox on symbol just copy yhe viewbox from the svg tag itself
  must add id on symbol
-->
<symbol id="location" viewBox="0 0 430.114 430.114">
  <!-- add all the icon's paths and shapes here -->
  <path d="M356.208,107.051c-1.531-5.738-4.64-11.852-6.94-17.205C321.746,23.704,261.611,0,213.055,0   C148.054,0,76.463,43.586,66.905,133.427v18.355c0,0.766,0.264,7.647,0.639,11.089c5.358,42.816,39.143,88.32,64.375,131.136   c27.146,45.873,55.314,90.999,83.221,136.106c17.208-29.436,34.354-59.259,51.17-87.933c4.583-8.415,9.903-16.825,14.491-24.857   c3.058-5.348,8.9-10.696,11.569-15.672c27.145-49.699,70.838-99.782,70.838-149.104v-20.262   C363.209,126.938,356.581,108.204,356.208,107.051z M214.245,199.193c-19.107,0-40.021-9.554-50.344-35.939   c-1.538-4.2-1.414-12.617-1.414-13.388v-11.852c0-33.636,28.56-48.932,53.406-48.932c30.588,0,54.245,24.472,54.245,55.06   C270.138,174.729,244.833,199.193,214.245,199.193z"/>
</symbol>

icon.html

<svg><use xlink:href="file_path/location.svg#location"></use></svg>

Comments

"কোনও ফিল / স্ট্রোক অপসারণ করুন" - পূরণ এবং স্ট্রোক অপসারণ করলে এসভিজি ভেঙে যেতে পারে (আমার ধারণায় এটি করার সময় এবং আমার পূর্বরূপ উইন্ডোতে ফলাফলটি দেখার জন্য) অন্তত আমার কাজ করুন)। বিকল্পভাবে কেউ ব্যবহার করতে পারেনcurrentColor

— ফ্রাঙ্ক নক্কে

Answer 7

এসভিজির পথ পূরণের রঙ পরিবর্তন করা সম্ভব। সিএসএস স্নিপেটের জন্য নীচে দেখুন:

1. সমস্ত পথের জন্য রঙ প্রয়োগ করতে: svg > path{ fill: red }

2. প্রথম ডি পাথের জন্য আবেদন করতে: svg > path:nth-of-type(1){ fill: green }

3. দ্বিতীয় ডি পাথের জন্য আবেদন করতে: svg > path:nth-of-type(2){ fill: green}

4. বিভিন্ন ডি পথের জন্য আবেদন করতে, কেবলমাত্র পাথ নম্বর পরিবর্তন করুন:
   svg > path:nth-of-type(${path_number}){ fill: green}

5. কৌনিক 2 থেকে 8 এ সিএসএসকে সমর্থন করতে, এনক্যাপসুলেশন ধারণাটি ব্যবহার করুন:

:host::ng-deep svg path:nth-of-type(1){
        fill:red;
    }

Answer 8

আপনার সমস্ত এসভিজি রাখুন:

fill="var(--svgcolor)"

---

সিএসএসে:

:root {
  --svgcolor: tomato;
}

সিউডো-ক্লাস ব্যবহার করতে:

span.github:hover {
  --svgcolor:aquamarine;
}

---

ব্যাখ্যা

রুট = এইচটিএমএল পৃষ্ঠা।
--svgcolor = একটি পরিবর্তনশীল।
span.github = একটি শ্রেণি গিথুব সহ ​​একটি স্প্যান উপাদান নির্বাচন করে ভিতরে একটি এসভিজি আইকন এবং সিউডো-শ্রেণীর হোভার নির্ধারণ করে।

Comments

নেটোর স্ট্যাকওভারফ্লোতে আপনাকে স্বাগতম। এটি একটি ভাল উত্তর মত দেখাচ্ছে। সাহায্য করার জন্যে ধন্যবাদ.

— এসআরএম