সিউডো উপাদানটিতে এসভিজি ব্যবহার করার কোনও উপায় আছে: আগে বা: পরে

Question

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

  #mydiv:before {
    content:"<svg.. code here</svg>";
    display:block;
    width:22px;
    height:10px;
    margin:10px 5px 0 10px;
  }

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

Comments

এটিকে ব্যাকগ্রাউন্ড ইমেজ হিসাবে ব্যবহার করে কিছু ভুল হচ্ছে?

— cimmanon

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

— সানি

Answer 1

হ্যা, তুমি পারো! কেবল এটি পরীক্ষা করা হয়েছে এবং এটি দুর্দান্ত কাজ করে, এটি দুর্দান্ত! এটি এখনও এইচটিএমএল দিয়ে কাজ করে না, তবে এটি এসভিজির সাথে কাজ করে।

আমার সূচক html এ আমার আছে:

<div id="test" style="content: url(test.svg); width: 200px; height: 200px;"></div>

এবং আমার টেস্ট.এসভিজি দেখতে এমন দেখাচ্ছে:

<svg xmlns="http://www.w3.org/2000/svg">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
   <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3"/>
</svg> 

Comments

যদি না SVGs বিশেষ তবে আপনি আপনার একটি চিত্র would একই আচরণ করতে সক্ষম হওয়া উচিত: content: url(path/to/my.svg)। এর অর্থ এই নয় যে এটি jQuery UI টুলটিপস লাইব্রেরির সাথে কাজ করবে, যদিও।

— cimmanon

@ সিমনম্যান হুম, এটি মিষ্টি, আমি এটি পরীক্ষা করতে চাই। সুতরাং আমার এইচটিএমএল বা যা কিছুতেই রেন্ডার করার জন্য আমার কাছে একগুচ্ছ এইচটিএমএল কোড থাকতে পারে ... দুর্দান্ত লাগছে।

— dezman

তুমি কেন এটা করতে চাও? আপনার যদি ইতিমধ্যে ফাইলে এসভিজি কোড থাকে তবে এটি ছদ্ম-শ্রেণিতে রাখার দরকার নেই। সিউডো-ক্লাসগুলির পুরো বিষয়টি হ'ল আপনি যখন কিছুটা বিষয়বস্তু যুক্ত করতে চান তখন DOM উপাদানগুলি হ্রাস করতে হয় তবে আপনার ক্ষেত্রে যদি আপনি কেবল নিজের এসভিজি কোডটি ব্যবহার করেন তবে এটি ছদ্মবেশে রাখার চেয়ে খারাপ (এবং সম্ভবত পরিষ্কার) হবে না no -ক্লাস (যা সম্ভবত অসম্ভবও)) অবশ্যই যদি আপনি নিজের এসভিজি কোডটি একগুচ্ছ অবস্থানগুলিতে রাখতে চান তবে এক্ষেত্রে আপনার নিজের এসজিজি কোডটি একটি চিত্রের মতো আলাদা একটি ফাইলে রাখা উচিত।

— ডেজম্যান

দুর্ভাগ্যক্রমে, আমি বিশ্বাস করি না যে এই সমাধানটি এসভিজি স্প্রাইটের সাথে কাজ করে। উদাহরণস্বরূপ, content: url(mysprite.svg#my-icon)আসলে আপনার আইকনটি টানবে না। তবে আমি ভুল প্রমাণিত হতে চাই :)

— জেসন

@ ওয়াটসন, শব্দার্থক। এইচটিএমএল = কাঠামো, সিএসএস = উপস্থাপনা। যদি কোনও এসভিজি আলংকারিক হয় তবে এটি HTML কাঠামোর মধ্যে থাকা উচিত নয়, এটি সিএসএসে থাকা উচিত।

— মৃত্যুর তালা

Answer 2

হ্যাঁ. আপনি একটি খালি: পরে বা: পূর্বে ব্যাকগ্রাউন্ড-চিত্র হিসাবে এসভিজি যুক্ত করতে পারেন। আপনি এখানে যান:

.anchor:before {
  display: block;
  content: ' ';
  background-image: url('../images/anchor.svg');
  background-size: 28px 28px;
  height: 28px;
  width: 28px;
}

Comments

কিছুক্ষণ সন্ধানের পরে আমি এটি সেরা সমাধান খুঁজে পাচ্ছি। আপনি elementোকানো উপাদানটির প্রতিটি একক দিক নিয়ন্ত্রণ করতে পারেন এবং সিএসএস স্টাইল-শিটগুলি পৃথক যুক্তি দিয়ে কাজ করে way দুর্দান্ত

— ড্যানিয়েল 515

... আহ এই আমার আশা জাগিয়েছে, যতক্ষণ background-sizeনা বুঝতে পারি যে অপেরা মিনিতে সমর্থিত নয়। এটি এত হতাশাব্যঞ্জক।

— ডেথলক

দুর্দান্ত কাজ করেছেন @ ডিথলক, ব্যাকগ্রাউন্ড-আকারের প্রয়োজন হবে না কারণ আপনি এসভিজি নিজেই মাত্রা নির্ধারণ করছেন, আমার এটির দরকার নেই।

— এরিক সোইকে

প্রশ্নটি যেহেতু "ছদ্ম উপাদানটিতে: আগে বা পরে"

— জ্লেম সিটিসেন

<?xml version="1.0" encoding="utf-8"?>এটি কার্যকর করতে আমার এসভিজি ফাইলের শুরুতে যুক্ত করতে হয়েছিল।

— নিকোলাস বোয়েস্টল্ট

Answer 3

#mydiv:before {
    content: url("data:image/svg+xml; utf8, <svg.. code here</svg>");
    display:block;
    width:22px;
    height:10px;
    margin:10px 5px 0 10px;
}

আপনার এসজিজে ডাবল উক্তি এবং ইউরেনকোড কোনও # চিহ্ন না রয়েছে তা নিশ্চিত করুন।

Comments

যেহেতু এসভিজিগুলি প্রায়শই ডাবল উদ্ধৃতি ব্যবহার করে, আপনি কেবল বহিরাগত একক উদ্ধৃতি ব্যবহার করতে পারেন। @ আপনি যদি কোনও বাহ্যিক এসভিজি ফাইল ব্যবহার করতে না চান তবে জেনির পরামর্শ এটি করার একটি দুর্দান্ত উপায় way

— মাইক্রোস

এটা অসাধারণ. দুর্ভাগ্যক্রমে এটি কেবলমাত্র আমার জন্য ক্রোমের সাথে কাজ করে (ক্রোম, ফায়ারফক্স এবং এজে পরীক্ষিত)।

— আর্সেন

ঠিক আছে এটি এফএফ উপর কাজ করে। শুধু "না #" অংশের দিকে মনোযোগ দেওয়ার প্রয়োজন। ডিভ ট্যাগ ব্যবহার নিশ্চিত করুন (স্প্যান দিয়ে কাজ করছে বলে মনে হচ্ছে না)। দুঃখজনকভাবে এখনও এজটির কোনও সাফল্য নেই।

— আর্সেন

অনেক উজ্জ্বল সমাধানের মতো এটি আই 11 সমর্থন করে না। url('file.svg')তবে কাজ করে।

— বব স্টেইন

আমি যা গুরুত্বপূর্ণ বলেছি তা xmlns='http://www.w3.org/2000/svg'হ'ল Chrome 66.x এ কাজ করার জন্য <svg> অংশটি যুক্ত করা। উদাহরণ হিসেবে বলা যায় - ছোট শেভ্রন হবে: content:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' fill='white'><path d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /></svg>");

— darth0s

Answer 4

সিএসএস স্প্রাইটস এবং ডেটা ইউরি ব্যবহার করা দ্রুত লোডিং এবং কম অনুরোধের মতো অতিরিক্ত আকর্ষণীয় সুবিধা দেয় এবং আমরা চিত্র / বেস 64 ব্যবহার করে আইই 8 সমর্থন পাই:

কোডভিং নমুনা এসভিজি ব্যবহার করে

এইচটিএমএল

<div class="div1"></div>
<div class="div2"></div>

সিএসএস

.div1:after, .div2:after {
  content: '';
  display: block;
  height: 80px;
  width: 80px;
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20height%3D%2280%22%20width%3D%22160%22%3E%0D%0A%20%20%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2238%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22red%22%20%2F%3E%0D%0A%20%20%3Ccircle%20cx%3D%22120%22%20cy%3D%2240%22%20r%3D%2238%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22blue%22%20%2F%3E%0D%0A%3C%2Fsvg%3E);
}
.div2:after {
  background-position: -80px 0;
}

আইই 8 এর জন্য, এতে পরিবর্তন করুন:

  background-image: url(data:image/png;base64,data......);

Comments

তবে এটি স্কেলেবল নয়, তাই না? আমি ইচ্ছায় এটিকে 16px বা 320px এ আকার দিতে পারি না।

— মৃত্যুবরণ

@ ডিথলক অবশ্যই এটি স্কেল করে, যদিও এটি আমার নমুনা নয় কারণ এটিতে একটি নির্দিষ্ট আকারের সেট রয়েছে, 80px প্রশস্ত / উচ্চ।

— আসন

@ ডিথলক আমি জিজ্ঞাসা করতে পারি যে উপরের নমুনাটি স্কেল না করায় আপনি কি ডাউনটিভেট হয়েছেন?

— আসন

আপনি কিভাবে এটি স্কেল করতে হবে? এবং না, আমি না।

— ডেথলক

@ ডিথলক ধন্যবাদ, এবং এখানে এসজিজি স্কেল করার একটি উপায়: jsfiddle.net/ess6ywce ... শতাংশ ব্যবহার করে। এছাড়াও, এর সাথে অনুসন্ধান করুন scale svgএবং আপনি আরও অনেক উপায় খুঁজে পাবেন

— Ason

Answer 5

<div class="author_">Lord Byron</div>

.author_ {  font-family: 'Playfair Display', serif; font-size: 1.25em; font-weight: 700;letter-spacing: 0.25em; font-style: italic;
  position:relative;
  margin-top: -0.5em;
  color: black;
  z-index:1;
  overflow:hidden;
  text-align:center;
 
}


.author_:after{
   left:20px;
  margin:0 -100% 0 0;
  display: inline-block;
  height: 10px;
  content: url(data:image/svg+xml,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120px%22%20height%3D%2220px%22%20viewBox%3D%220%200%201200%20200%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Cpath%20stroke%3D%22black%22%20stroke-width%3D%223%22%20fill%3D%22none%22%20d%3D%22M1145%2085c17%2C7%208%2C24%20-4%2C29%20-12%2C4%20-40%2C6%20-48%2C-8%20-9%2C-15%209%2C-34%2026%2C-42%2017%2C-7%2045%2C-6%2062%2C2%2017%2C9%2019%2C18%2020%2C27%201%2C9%200%2C29%20-27%2C52%20-28%2C23%20-52%2C34%20-102%2C33%20-49%2C0%20-130%2C-31%20-185%2C-50%20-56%2C-18%20-74%2C-21%20-96%2C-23%20-22%2C-2%20-29%2C-2%20-56%2C7%20-27%2C8%20-44%2C17%20-44%2C17%20-13%2C5%20-15%2C7%20-40%2C16%20-25%2C9%20-69%2C14%20-120%2C11%20-51%2C-3%20-126%2C-23%20-181%2C-32%20-54%2C-9%20-105%2C-20%20-148%2C-23%20-42%2C-3%20-71%2C1%20-104%2C5%20-34%2C5%20-65%2C15%20-98%2C22%22%2F%3E%0A%3C%2Fsvg%3E%0A);
}
.author_:before {
  right:20px;
  margin:0 0 0 -100%;
  display: inline-block;
  height: 10px;
  content: url(data:image/svg+xml,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120px%22%20height%3D%2220px%22%20viewBox%3D%220%200%201200%20130%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Cpath%20stroke%3D%22black%22%20stroke-width%3D%223%22%20fill%3D%22none%22%20d%3D%22M55%2068c-17%2C6%20-8%2C23%204%2C28%2012%2C5%2040%2C7%2048%2C-8%209%2C-15%20-9%2C-34%20-26%2C-41%20-17%2C-8%20-45%2C-7%20-62%2C2%20-18%2C8%20-19%2C18%20-20%2C27%20-1%2C9%200%2C29%2027%2C52%2028%2C23%2052%2C33%20102%2C33%2049%2C-1%20130%2C-31%20185%2C-50%2056%2C-19%2074%2C-21%2096%2C-23%2022%2C-2%2029%2C-2%2056%2C6%2027%2C8%2043%2C17%2043%2C17%2014%2C6%2016%2C7%2041%2C16%2025%2C9%2069%2C15%20120%2C11%2051%2C-3%20126%2C-22%20181%2C-32%2054%2C-9%20105%2C-20%20148%2C-23%2042%2C-3%2071%2C1%20104%2C6%2034%2C4%2065%2C14%2098%2C22%22%2F%3E%0A%3C%2Fsvg%3E%0A);
}

	<div class="author_">Lord Byron</div>

এসভিজি এনকোডিং url-encoder এর জন্য সুবিধাজনক সরঞ্জাম

Answer 6

অন্যান্য উত্তরগুলির সমস্ত আইইতে কিছু সমস্যা আছে সে সম্পর্কে সতর্ক থাকুন।

এই পরিস্থিতিতে থাকতে দেয় - চাপ দেওয়া আইকন সহ বোতাম। সমস্ত ব্রাউজারগুলি এটি সঠিকভাবে পরিচালনা করে তবে আইআই উপাদানটির প্রস্থ গ্রহণ করে এবং বিষয়বস্তুটিকে এটি ফিট করার আগে স্কেল করে। JSFiddle

#mydiv1 { width: 200px; height: 30px; background: green; }
#mydiv1:before {
    content: url("data:url or /standard/url.svg");
}

সমাধানটি উপাদানটির আগে আকার নির্ধারণ করা হয় এবং এটি যেখানে থাকে সেখানে রেখে দেওয়া হয়:

#mydiv2 { width: 200px; height: 30px; background: green; }
#mydiv2:before {
    content: url("data:url or /standard/url.svg");
    display: inline-block;
    width: 16px; //only one size is alright, IE scales uniformly to fit it
}

background-image+ + background-sizeসমাধান হিসাবে ভাল কাজ করে, কিন্তু, সামান্য unhandy যেহেতু আপনি একই আকারের দ্বিগুণ নির্দিষ্ট করতে হবে।

আইই ১১-এ ফলাফল:

Answer 7

এই বিষয়টি আরও প্রসারিত করার জন্য। আপনি যদি ফন্ট অসাধারণ 5 আইকন যুক্ত করতে চান তবে আপনাকে কিছু অতিরিক্ত সিএসএস যুক্ত করতে হবে।

ডিফল্টরূপে আইকনগুলির ক্লাস থাকে svg-inline--faএবং fa-w-*।

এছাড়া মত পরিবর্তক ক্লাস আছে fa-lg, fa-rotate-*এবং অন্যান্য। আপনাকে svg-with-js.cssফাইলটি পরীক্ষা করতে হবে এবং এর জন্য যথাযথ সিএসএস সন্ধান করতে হবে।

সিএসএস আইকনটিতে আপনাকে নিজের রঙ যুক্ত করতে হবে অন্যথায় এটি ডিফল্টরূপে কালো হবে, উদাহরণস্বরূপ fill='%23f00'যেখানে %23এনকোড করা আছে #।

h1::before{

  /* svg-inline--fa */
  display:inline-block;
  font-size:inherit;
  height:1em;
  overflow:visible;
  vertical-align:-.125em;
  
  /* fa-w-14 */
  width:.875em;
  
  /* Icon */
  content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23f00' d='M400 256H152V152.9c0-39.6 31.7-72.5 71.3-72.9 40-.4 72.7 32.1 72.7 72v16c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24v-16C376 68 307.5-.3 223.5 0 139.5.3 72 69.5 72 153.5V256H48c-26.5 0-48 21.5-48 48v160c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48zM264 408c0 22.1-17.9 40-40 40s-40-17.9-40-40v-48c0-22.1 17.9-40 40-40s40 17.9 40 40v48z'%3E%3C/path%3E%3C/svg%3E");
  
  /* Margin */
  margin-right:.75rem;
}

<h1>Lorem Ipsum</h1>

Answer 8

.myDiv {
  display: flex;
  align-items: center;
}

.myDiv:before {
  display: inline-block;
  content: url(./dog.svg);
  margin-right: 15px;
  width: 10px;
}

Comments

আপনার উত্তরটি আরও কিছুটা ব্যাখ্যা করা উচিত। কেবল এ থেকে, আপনার উত্তর কীভাবে বা কেন কাজ করে তা বলা শক্ত hard

— ifconfig