বাহ্যিক সিএসএস সহ এসভিজি কীভাবে স্টাইল করবেন?

Question 1

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

টুলটিপসকে কাজ করার অনুমতি দেওয়ার জন্য আমি এগুলি সেগুলি বাস্তবায়িত করেছি এবং আমি <a>লিঙ্কটিকে অনুমতি দেওয়ার জন্য প্রত্যেককে একটি ট্যাগে আবৃত করেছি ।

<a href='http://youtube.com/...' target='_blank'><img class='socIcon' src='images/socYouTube.svg' title='View my videos on YouTube' alt='YouTube' /></a>

এবং এখানে এসভিজি গ্রাফিকের কোডটি রয়েছে:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="stylesheets/main.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
<g>
    <path d="M28.44......./>
</g>
</svg>

আমি নিম্নলিখিতগুলি আমার বাহ্যিক সিএসএস ফাইলে রেখেছি (মেইন সিএসএস):

.socIcon g {fill:red;}

তবুও গ্রাফিকটিতে এর কোনও প্রভাব নেই। আমি .socIcon g পাথ {} এবং .socIcon পাথ tried tried চেষ্টা করেছিলাম}

কিছু ঠিক নেই, সম্ভবত আমার বাস্তবায়ন বাহ্যিক সিএসএস সংশোধন করার অনুমতি দেয় না, বা আমি একটি পদক্ষেপ মিস করেছি? আমি সত্যিই আপনার সাহায্যের প্রশংসা করব! আমার কেবলমাত্র আমার বাহ্যিক স্টাইলশিটের মাধ্যমে এসভিজি গ্রাফিকের রঙগুলি সংশোধন করার দক্ষতা প্রয়োজন তবে আমি টুলটিপ এবং লিঙ্কের ক্ষমতা হারাতে পারি না। (আমি যদিও টুলটিপস ছাড়া বাঁচতে সক্ষম হতে পারি।) ধন্যবাদ!

Question 2

যদি আপনার এসভিজি ফাইলটি এইচটিএমএলটিতে ইনলাইন অন্তর্ভুক্ত করা হয় তবে আপনার মেইন সিএসএস ফাইলটি কেবল এসভিজির সামগ্রীতে প্রভাব ফেলবে:

https://developer.mozilla.org/en/docs/SVG_In_HTML_Irrifications

<html>
  <body>
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
    <g>
      <path d="M28.44......./>
    </g>
  </svg>
</html>

আপনি যদি নিজের এসভিজি ফাইলগুলিতে রাখতে চান তবে এসভিজি ফাইলের অভ্যন্তরে সিএসএসের সংজ্ঞা দেওয়া দরকার।

আপনি এটি স্টাইল ট্যাগ দিয়ে করতে পারেন:

http://www.w3.org/TR/SVG/styling.html#StyleElementExample

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="50px" height="50px" viewBox="0 0 50 50">
  <defs>
    <style type="text/css"><![CDATA[
      .socIcon g {
        fill:red;
      }
    ]]></style>
  </defs>
  <g>
    <path d="M28.44......./>
  </g>
</svg>

আপনি সক্রিয় শৈলীর উপর নির্ভর করে স্টাইল ট্যাগ আপডেট করতে সার্ভার সাইডে একটি সরঞ্জাম ব্যবহার করতে পারেন। রুবিতে আপনি নোকোগিরি দিয়ে এটি অর্জন করতে পারেন। এসভিজি কেবল এক্সএমএল। সুতরাং সম্ভবত অনেকগুলি এক্সএমএল লাইব্রেরি উপলব্ধ রয়েছে যা সম্ভবত এটি অর্জন করতে পারে।

যদি আপনি এটি করতে সক্ষম না হন তবে আপনাকে কেবল সেগুলি পিএনজি হিসাবে ব্যবহার করতে হবে; প্রতিটি শৈলীর জন্য একটি সেট তৈরি করা এবং তাদের শৈলীর ইনলাইন সংরক্ষণ করা।

Question 3

আপনি যা চান তা করতে পারেন, একটি (গুরুত্বপূর্ণ) ক্যাভ্যাট সহ: আপনার প্রতীকের মধ্যে থাকা পথগুলি বহিরাগত সিএসএসের মাধ্যমে স্বতন্ত্রভাবে স্টাইল করা যায় না - আপনি কেবল এই পদ্ধতিতে পুরো চিহ্নের জন্য বৈশিষ্ট্যগুলি সেট করতে পারেন। সুতরাং, যদি আপনার প্রতীকটিতে দুটি পাথ থাকে এবং তাদের বিভিন্ন ভরাট রঙ থাকতে চান তবে এটি কার্যকর হবে না, তবে আপনি যদি চান যে আপনার সমস্ত পাথ একই রকম হয় তবে এটি কাজ করা উচিত।

আপনার এইচটিএমএল ফাইলে আপনি এমন কিছু চান:

<style>
  .fill-red { fill: red; }
  .fill-blue { fill: blue; }
</style>

<a href="//www.example.com/">
  <svg class="fill-red">
    <use xlink:href="images/icons.svg#example"></use>
  </svg>
</a>

এবং বাহ্যিক এসভিজি ফাইলে আপনি এই জাতীয় কিছু চান:

<svg xmlns="http://www.w3.org/2000/svg">
   <symbol id="example" viewBox="0 0 256 256">
    <path d="M120.... />
  </symbol>
</svg>

বর্গ অদলবদল svgথেকে (আপনার HTML এ) ট্যাগ fill-redকরতে fill-blueও Ta-দা ... আপনি লাল পরিবর্তে নীল আছে।

ইন-লাইন সিএসএস প্রাধান্য পাবে বলে আপনি নির্দিষ্ট পথগুলিতে কিছু ইন-লাইন সিএসএসের সাথে বাহ্যিক সিএসএসের সাথে মিশ্রণ বা মিলিয়ে বাইরের সিএসএসের সাথে পৃথকভাবে পাথগুলি লক্ষ্য করতে সক্ষম হবার সীমাবদ্ধতার আশপাশে পেতে পারেন। আপনি যদি রঙিন ব্যাকগ্রাউন্ডের বিরুদ্ধে সাদা আইকনের মতো কিছু করছেন তবে আপনি বাহ্যিক সিএসএসের মাধ্যমে পটভূমির রঙ পরিবর্তন করতে চান তবে এই আইকনটি সবসময় সাদা (বা তদ্বিপরীত) হয় তবে এই পদ্ধতিটি কার্যকর হবে would সুতরাং, আগের মতো একই এইচটিএমএল এবং এই এসভিজি কোডের মতো কিছু দিয়ে আপনি একটি লাল পটভূমি এবং একটি সাদা অগ্রভাগের পথ পাবেন:

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="example" viewBox="0 0 256 256">
    <path class="background" d="M120..." />
    <path class="icon" style="fill: white;" d="M20..." />
  </symbol>
</svg>

Question 4

আপনি আপনার এসভিজি ফাইলগুলিতে বাইরের সিএসএস ফাইলের লিঙ্কটি ব্যবহার করে এটি অন্তর্ভুক্ত করতে পারেন:

<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="mystyles.css" type="text/css"/>

ট্যাগ খোলার পরে আপনার এটি রাখা দরকার:

<svg>
  <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="mystyles.css" type="text/css"/>
  <g>
    <path d=.../>
  </g>
</svg>

এটি নিখুঁত সমাধান নয়, কারণ আপনাকে এসভিজি ফাইলগুলি সংশোধন করতে হবে তবে আপনি সেগুলি একবারে সংশোধন করতে পারেন এবং সমস্ত স্টাইলিং পরিবর্তনের চেয়ে সমস্ত এসএসজি ফাইলের জন্য একটি সিএসএস ফাইলে করা যেতে পারে।

Question 5

গতিশীলভাবে জাভাস্ক্রিপ্টে একটি শৈলী উপাদান তৈরি করে এবং এসভিজি উপাদানটিতে এটি যুক্ত করে কোনও এসভিজি স্টাইল করা সম্ভব। হ্যাকি, কিন্তু এটি কাজ করে।

<object id="dynamic-svg" type="image/svg+xml" data="your-svg.svg">
    Your browser does not support SVG
</object>
<script>
    var svgHolder = document.querySelector('object#dynamic-svg');
    svgHolder.onload = function () {
        var svgDocument = svgHolder.contentDocument;
        var style = svgDocument.createElementNS("http://www.w3.org/2000/svg", "style");

        // Now (ab)use the @import directive to load make the browser load our css
        style.textContent = '@import url("/css/your-dynamic-css.css");';

        var svgElem = svgDocument.querySelector('svg');
        svgElem.insertBefore(style, svgElem.firstChild);
    };
</script>

আপনি চাইলে পিএইচপি তে আপনি জাভাস্ক্রিপ্ট ডায়নামিকভাবে জেনারেট করতে পারবেন - জাভাস্ক্রিপ্টে এটি সম্ভব হওয়ার সম্ভাবনা একটি অগণিত সম্ভাবনার উদ্রেক করে।

Question 6

আপনি নিতে পারেন এমন একটি উপায় ব্রাউজারে এসভিজি গ্রাফিক্সের চেহারা পরিবর্তন করতে কেবল CSS ফিল্টার ব্যবহার করা।

উদাহরণস্বরূপ, যদি আপনার কাছে কোনও এসভিজি গ্রাফিক থাকে যা এসভিজি কোডের মধ্যে লাল রঙের একটি পূর্ণ রঙ ব্যবহার করে তবে আপনি 180 ডিগ্রির হিউ-রোটেট সেটিং দিয়ে বেগুনি রঙিন করতে পারেন:

#theIdOfTheImgTagWithTheSVGInIt {
    filter: hue-rotate(180deg);
    -webkit-filter: hue-rotate(180deg);
    -moz-filter: hue-rotate(180deg);
    -o-filter: hue-rotate(180deg);
    -ms-filter: hue-rotate(180deg);
}

আপনার পছন্দের রংগুলি খুঁজতে অন্যান্য হিউ-রোটেট সেটিংসের সাথে পরীক্ষা করুন।

পরিষ্কার হওয়ার জন্য, উপরের সিএসএসটি আপনার এইচটিএমএল ডকুমেন্টে প্রয়োগ করা সিএসএসে যায়। আপনি এইচটিএমএল কোডে ইমগ ট্যাগটি স্টাইল করছেন, এসভিজির কোডটি স্টাইল করছেন না।

এবং দ্রষ্টব্য যে এটি কালো বা সাদা বা ধূসর রঙের গ্রাফিক্সের সাথে কাজ করবে না। সেই রঙের রঙটি ঘোরানোর জন্য আপনাকে সেখানে একটি সত্যিকারের রঙ থাকতে হবে।

Question 7

আপনি যদি <object>নিজের এসভিজি এম্বেড করার জন্য ট্যাগটি ব্যবহার করেন তবে কোনও বাহ্যিক CSS স্টাইলশিট সহ গতিশীল স্টাইলের খুব দ্রুত সমাধান ।

এই উদাহরণটি <svg>প্যারেন্ট উপাদানগুলির উপর ক্লিক করে মূল ট্যাগটিতে একটি শ্রেণি যুক্ত করবে ।

file.svg:

<?xml-stylesheet type="text/css" href="../svg.css"?>
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="">
  <g>
   <path/>
  </g>
 </svg>

এইচটিএমএল:

<a class="parent">
  <object data="file.svg"></object>
</a>

জ্যাকারি:

$(function() {
  $(document).on('click', '.parent', function(){
    $(this).find('object').contents().find('svg').attr("class","selected");
  }
});

ক্লিক প্যারেন্ট উপাদান:

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="" class="selected">

তাহলে আপনি আপনার সিএসএস পরিচালনা করতে পারেন

svg.css:

path {
 fill:none;
 stroke:#000;
 stroke-miterlimit:1.41;
 stroke-width:0.7px;
}

.selected path {
 fill:none;
 stroke:rgb(64, 136, 209);
 stroke-miterlimit:1.41;
 stroke-width:0.7px;
}

Question 8

বাহ্যিক এসজিজি চিত্রগুলি প্রথমে ইনলাইন করে এটি করা সম্ভব হবে। নীচের কোডটি সমস্ত এসভিজি চিত্রগুলি জেস ফ্রেজেলের দ্বারা ইনলাইন এসভিজির সাথে প্রতিস্থাপন থেকে এসেছে।

$('img.svg').each(function(){
  var $img = $(this);
  var imgID = $img.attr('id');
  var imgClass = $img.attr('class');
  var imgURL = $img.attr('src');
  $.get(imgURL, function(data) {
    // Get the SVG tag, ignore the rest
    var $svg = $(data).find('svg');
    // Add replaced image's ID to the new SVG
    if (typeof imgID !== 'undefined') {
      $svg = $svg.attr('id', imgID);
    }
    // Add replaced image's classes to the new SVG
    if (typeof imgClass !== 'undefined') {
      $svg = $svg.attr('class', imgClass+' replaced-svg');
    }
    // Remove any invalid XML tags as per http:validator.w3.org
    $svg = $svg.removeAttr('xmlns:a');
    // Replace image with new SVG
    $img.replaceWith($svg);
  });
});

Question 9

কোনও <image>ট্যাগ ব্যবহার করার সময় এসভিজি অবশ্যই গোপনীয়তার কারণে একক ফাইলে থাকতে হবে। এই বাগজিলা বাগের ঠিক এটি কেন হয় তার আরও বিশদ রয়েছে। দুর্ভাগ্যক্রমে আপনি কোনও ভিন্ন ট্যাগ যেমন ব্যবহার করতে পারবেন না <iframe>কারণ এটি কোনও লিঙ্ক হিসাবে কাজ করবে না তাই আপনাকে <style>ফাইলের মধ্যেই একটি ট্যাগে সিএসএস এম্বেড করতে হবে ।

এটি করার অন্য একটি উপায় হ'ল মূল এইচটিএমএল ফাইলের মধ্যে এসভিজি ডেটা থাকা

<a href='http://youtube.com/...' target='_blank'>
  <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
    <g>
        <path d="M28.44......./>
    </g>
  </svg>
</a>

আপনি এইচটিএমএল <link>ট্যাগ ব্যবহার করে একটি বাহ্যিক সিএসএস ফাইল দিয়ে স্টাইল করতে পারেন ।

Question 10

"ব্যবহারকারীরা আমার সাইটের জন্য কোন রঙের স্কিম বেছে নিয়েছে তার ভিত্তিতে আমি এই চিত্রগুলির রঙগুলি পরিবর্তন করতে যাচ্ছি" " - জর্ডান 10 ঘন্টা আগে

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

<?php

    header('Content-Type: image/svg+xml');
    echo '<?xml version="1.0" encoding="utf-8"?>';
    $color = $_GET['color'];

?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
    <g>
        <path fill="<?php echo $color; ?>" d="M28.44..."/>
    </g>
</svg>

এবং পরে আপনি এই ফাইলটি filename.php?color=#ffffffপছন্দসই রঙে এসভিজি ফাইল পেতে ব্যবহার করতে পারেন ।

Question 11

আমার জন্য কী কাজ করে: @ আমল বিধি সহ স্টাইল ট্যাগ

<defs>
    <style type="text/css">
        @import url("svg-common.css");
    </style>
</defs>

Question 12

আমি এটির একটি পুরানো পোস্ট জানি তবে কেবল এই সমস্যাটি পরিষ্কার করতে ... আপনি নিজের ক্লাসটি ভুল জায়গায় ব্যবহার করছেন: ডি

সবার আগে আপনি ব্যবহার করতে পারেন

svg { fill: red; }

আপনার main.cssএটি লাল পেতে। এটি কার্যকর হয়। নির্দিষ্টভাবে প্যাচগুলি পেতে আপনি সম্ভবত নোড নির্বাচকগুলি ব্যবহার করতে পারেন।

দ্বিতীয় বিষয়টি হল, আপনি ক্লাসটি-ট্যাগে imgঘোষণা করেছিলেন।

<img class='socIcon'....

আপনার এসভিজির ভিতরে এটি অবশ্যই ঘোষণা করা উচিত। আপনার যদি পৃথক প্যাথ থাকে তবে আপনি অবশ্যই আরও সংজ্ঞা দিতে পারেন।

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="stylesheets/main.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
<g>
    <path class="myClassForMyPath" d="M28.44......./>
</g>
</svg>

এখন আপনি আপনার main.cssপছন্দ মত রঙ পরিবর্তন করতে পারে

.myClassForMyPath {
    fill: yellow;
}

Question 13

বাহ্যিক শৈলীর জন্য

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">

  <style>
	@import url(main.css);
  </style>

  <g>
    <path d="M28.44......./>
  </g>
</svg>

স্নিপেট প্রসারিত করুন

অভ্যন্তরীণ স্টাইলগুলির জন্য

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">

  <style>
	    .socIcon g {fill:red;}
  </style>

  <g>
    <path d="M28.44......./>
  </g>
</svg>

স্নিপেট প্রসারিত করুন

দ্রষ্টব্য: আপনি যদি এসভিজি <img>ট্যাগের অভ্যন্তরে অন্তর্ভুক্ত করেন তবে বাহ্যিক স্টাইলগুলি কাজ করবে না । এটি <div>ট্যাগের ভিতরে পুরোপুরি কাজ করবে

Question 14

@ লিওটি এখানে কৌনিক জেএস সংস্করণ, আবার ধন্যবাদ

G.directive ( 'imgInlineSvg', function () {

return {
    restrict : 'C',
    scope : true,
    link : function ( scope, elem, attrs ) {

        if ( attrs.src ) {

            $ ( attrs ).each ( function () {
                var imgID    = attrs.class;
                var imgClass = attrs.class;
                var imgURL   = attrs.src;

                $.get ( imgURL, function ( data ) {

                    var $svg = $ ( data ).find ( 'svg' );
                    if ( typeof imgID !== 'undefined' ) {
                        $svg = $svg.attr ( 'id', imgID );
                    }

                    if ( typeof imgClass !== 'undefined' ) {
                        $svg = $svg.attr ( 'class', imgClass + ' replaced-svg' );
                    }

                    $svg = $svg.removeAttr ( 'xmlns:a' );

                    elem.replaceWith ( $svg );

                } );

            } );
        }

    }

}

} );

Question 15

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