এসভিজি মূল উপাদানটির ডিফল্ট পটভূমি রঙ

Question

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

<svg viewBox="0 0 500 600" style="background: red">/* content */</svg>

উপরের সমাধানটি কাজ করে তবে শৈলীর বৈশিষ্ট্যের ব্যাকগ্রাউন্ড সম্পত্তিটি দুর্ভাগ্যক্রমে কোনও মানসম্মত নয়: http://www.w3.org/TR/SVG/styling.html#SVGStylingProperties , এবং তাই এটি এসভিজির সাথে পরিষ্কারের প্রক্রিয়া চলাকালীন সরানো হবে gets পরিষ্কারক.

এই ব্যাকগ্রাউন্ডের রঙ ঘোষণার অন্য কোনও উপায় আছে?

Comments

এসভিজি ক্লিনারটিতে সম্ভবত কোনও বাগ রয়েছে? এটি স্ট্যান্ড ব্লকগুলি পাশাপাশি সরিয়ে দেয়, যদিও এটি মানক: w3.org/TR/SVG/styling.html# স্টাইলিং উইথ সিএসএস

— ভোলকার ই।

Answer 1

এসভিজি ১.২ ক্ষুদ্রের ভিউপোর্ট-ফিল রয়েছে তবে আমি নিশ্চিত নই যে এই সম্পত্তিটি কীভাবে ব্যাপকভাবে প্রয়োগ করা হয়েছে যদিও বেশিরভাগ ব্রাউজারগুলি এসভিজি ১.১-কে টার্গেট করছে। অপেরা এটি FWIW প্রয়োগ করে।

বর্তমানে আরও একটি ক্রস ব্রাউজার সমাধান হ'ল <rect>প্রস্থ এবং উচ্চতা 100% সহ একটি উপাদানকে আটকে রাখা এবং উপাদানটির প্রথম শিশু হিসাবে = "লাল" পূরণ করা <svg>, উদাহরণস্বরূপ:

<rect width="100%" height="100%" fill="red"/>

Comments

রিট হ্যাক সাজানোর কাজ করে তবে এটি ধরে নেয় যে এসভিগির দিকটি অনুপাতটি সর্বদা এটির ভিউপোর্টের সাথে মিলে যায়, সুতরাং এটি সমস্ত পরিস্থিতিতে পুরো ভিউপোর্ট পূরণ করবে না।

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

যখন অনুপাতের অনুপাত ভিউপোর্টের সাথে মেলে না তখন এটি ব্যবহার করে width="10000%" height="10000%"এটি ঠিক করতে পারে। যদি না হয় তবে কিছু শূন্য যোগ করুন

— মুল্লহাউসন

@ মল্লহাউসেন দুর্ভাগ্যক্রমে 10000000% এর চেয়ে বেশি মান যুক্ত করা কার্যকর হয়নি। অন্য কোন পরামর্শ?

— ক্র্যাশলোট

একটি পরিত্যক্ত viewport-fillক্যানিয়াস টান অনুরোধ: github.com/Fyrd/caniuse/issues/2186 কেন তারা এসভিজিকে মরতে দিলেন।

— সিরো সান্তিলি 郝海东 冠状 病 六四 事件 法轮功

Answer 2

সাফারিতে এটি কাজ করে। এসভিজি কেবলমাত্র পটভূমির রঙের সাথে রঙগুলিতে যেখানে কোনও উপাদানের বাউন্ডিং বক্সটি কভার করে। সুতরাং, এটি শূন্য পিক্সেলের সীমানা সহ একটি সীমানা (স্ট্রোক) দিন। এটি আপনার ব্যাকগ্রাউন্ড-রঙের সাথে পুরো জিনিসটি পূরণ করে।

<svg style='stroke-width: 0px; background-color: blue;'> </svg>

Comments

এর ফলে সমস্ত উপ-উপাদান স্ট্রোকও শূন্য-প্রস্থের হয়ে যায়, সুতরাং এটি একটি ভাল "ব্যাকগ্রাউন্ড" বিকল্প নয়।

— duanev

Answer 3

এটি এখন কোড সহ @ রবার্ট লংসনের উত্তর, (মূলত কোনও কোড ছিল না, এটি পরে যুক্ত করা হয়েছিল):

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
 <rect width="100%" height="100%" fill="red"/>
</svg>

এই উত্তরটি ব্যবহার করে:

• https://stackoverflow.com/a/11293812/6747994
• https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes

Answer 4

আমাকে পাওয়া একটি খুব সাধারণ সমাধানের প্রতিবেদন করি, এটি পূর্বের উত্তরে লেখা নেই। আমি একটি এসভিজিতে ব্যাকগ্রাউন্ড সেট করতে চেয়েছিলাম, তবে আমি এটিও চাই যে এটি স্ট্যান্ডোলোন এসভিজি ফাইলে কাজ করে।

ঠিক আছে, এই সমাধানটি আসলেই সহজ, আসলে এসভিজি শৈলী ট্যাগগুলিকে সমর্থন করে, তাই আপনি এর মতো কিছু করতে পারেন

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
  <style>svg { background-color: red; }</style>
  <text>hello</text>
</svg>

Comments

দুর্দান্ত এবং সহজ সমাধান!

— কনসেপ্টডেলাক্স

যদিও এটি সমস্ত ব্রাউজারগুলিতে সাধারণভাবে কাজ করে background-colorতবে <svg>উপাদানটির সেটিংটি আইই 11 viewBoxবৈশিষ্ট্যের সাথে সংজ্ঞায়িত অঞ্চলটির বাইরেও পটভূমির রঙকে রেন্ডার করে । যদিও এটি ব্যবহার করে widthএবং heightবৈশিষ্ট্যগুলি বিবেচনা করে না ।

— কনসেপ্টডেলাক্স

@ কনসেপ্টডেলাক্স আকর্ষণীয় পর্যবেক্ষণ, তাত্ত্বিকভাবে এসভিজির অভ্যন্তরে কোডড স্টাইলটি কেবল এসভিজির অভ্যন্তরে প্রয়োগ করা উচিত। তবে প্রস্থ এবং উচ্চতা নির্ধারণ প্রায় সর্বদা প্রয়োজনীয়।

— জিয়ানলুকা কাসাটি

ট্যাগটি শীর্ষ স্তরে রয়েছে তা ধরে রেখে কি <svg style"...."></svg>এবং এর মধ্যে কোনও পার্থক্য রয়েছে ? যদি তা না হয় তবে এই উত্তরটি কেবল ওপির মূল সমাধানের মতো বলে মনে হচ্ছে, ভিন্ন সিনট্যাক্সের অধীনে পুনরায় সাজানো। (তবে সম্ভবত এই সমাধান এসভিজি ক্লিনার থেকে বেঁচে থাকবে, তবে কী না?)<svg><style>...</style></svg><style><svg style="..."></svg>

— ল্যাব্রাডর

@ ল্যাব্রাডর আমি সমাধানের সন্ধান করছিলাম, এই প্রশ্নটি দেখেছিলাম, তারপরে এটি সমাধানের উপায় খুঁজে পেয়েছি এবং ভাগ করে নিয়েছি। আমি জানি না, দেখে মনে হচ্ছে এটি কেবলমাত্র এই w3.org/TR/SVG/styling.html#SVGStylingProperties সমর্থিত বৈশিষ্ট্যগুলির মতামতযুক্ত । অন্যদিকে আমি প্রস্তাবিত সমাধানটি কাজ করে এবং আমার পছন্দ হয় যে এটির ফলে আপনি অন্য এসভিজি ট্যাগগুলিকে স্টাইল করতে পারবেন, যেমন পথ, আয়ত্ত, ইত্যাদি me আমার জন্য প্রধান বৈশিষ্ট্যটি এটি স্ট্যান্ডেলোন এসভিজির জন্যও কাজ করে।

— জিয়ানলুকা কাসাটি

Answer 5

আমি বর্তমানে এই জাতীয় একটি ফাইলে কাজ করছি:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="style.css" ?>
<svg
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  width="100%"
  height="100%"
  viewBox="0 0 600 600">
...

এবং আমি এটিতে চেষ্টা করেছি style.css:

svg {
  background: #bf1f1f;
}

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

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    version="1.1"
    ...
  <sodipodi:namedview
     pagecolor="#480000" ... >

ঠিক আছে, মনে হয় যে এসভিজি মূল উপাদানটি এসভিজি পুনঃনির্মাণে রঙিন উপাদানগুলির অংশ নয় ।

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

Comments

<rect প্রস্থ = "100%" উচ্চতা = "100%" পূরণ = "সাদা" /> শুরুতে ইওগের জন্য সমস্যার সমাধান করে

— এনভ্রান্ডো

Answer 6

এটিকে <div>মোড়ানোর জন্য একই আকারের ব্যবহার করা অন্য কাজ হতে পারে <svg>। এর পরে, আপনি আবেদন করতে সক্ষম হবেন "background-color"এবং "background-image"এটি প্রভাবিত করবে svg।

<div class="background">
  <svg></svg>
</div>

<style type="text/css">
.background{
  background-color: black; 
  /*background-image: */
}
</style>

Comments

এই সমাধানটি এইচটিএমএল হ্যাক। এবং আপনি যদি কোনও ওয়েব পৃষ্ঠায় এসভিজি ব্যবহার করছেন কেবল তখনই কাজ করতে পারে। এটি সত্যিকারের এসভিজি সমাধান নয়।

— চার্লস-অ্যাডার্ড কোস্ট

এসভিজির ব্যাকগ্রাউন্ড কালারটি যে অংশটি বসে আছে তার থেকে ধার করা হয়েছে sv কোনওভাবেই আমি এটি হ্যাক মনে করি না।

— ক্লিনাক্স

ক্লিনাক্স: চার্লস যা বলার চেষ্টা করেছিল তা হ'ল এটি ওয়েব পেজ রেন্ডারিংয়ের জন্য পুরোপুরি কাজ করে তবে মনে করুন আপনি অন্য কোনও জায়গায় রেন্ডারিংয়ের জন্য .svg এক্সটেনশান সহ কোনও চিত্র হিসাবে একই svg ব্যবহার করতে চান, এটি কার্যকর নাও হতে পারে।

— অরুণকুমার শ্রীশৈলপাঠি