নির্দিষ্ট পরিস্থিতিতে যখন ওরিয়েন্টেশনটি পরিবর্তন করা হয়েছিল তখন আমার একটি এসভিজি নিয়ে একটি সমস্যা ছিল যা অ্যান্ড্রয়েডের জন্য ক্রোমে অদৃশ্য হয়ে গিয়েছিল। নীচের কোডটি এটি পুনরুত্পাদন করে না, তবে এটি আমাদের ছিল সেটআপ।
body {
font-family: tahoma, sans-serif;
font-size: 12px;
margin: 10px;
}
article {
display: flex;
}
aside {
flex: 0 1 10px;
margin-right: 10px;
min-width: 10px;
position: relative;
}
svg {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.backgroundStop1 {
stop-color: #5bb79e;
}
.backgroundStop2 {
stop-color: #ddcb3f;
}
.backgroundStop3 {
stop-color: #cf6b19;
}
<article>
<aside>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" width="100%">
<defs>
<linearGradient id="IndicatorColourPattern" x1="0" x2="0" y1="0" y2="1">
<stop class="backgroundStop1" offset="0%"></stop>
<stop class="backgroundStop2" offset="50%"></stop>
<stop class="backgroundStop3" offset="100%"></stop>
</linearGradient>
</defs>
<rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" fill="url(#IndicatorColourPattern)"></rect>
</svg>
</aside>
<section>
<p>Donec et eros nibh. Nullam porta, elit ut sagittis pulvinar, lacus augue lobortis mauris, sed sollicitudin elit orci non massa. Proin condimentum in nibh sed vestibulum. Donec accumsan fringilla est, porttitor vestibulum dolor ornare id. Sed elementum
urna sollicitudin commodo ultricies. Curabitur tristique orci et ligula interdum, eu condimentum metus eleifend. Nam libero augue, pharetra at maximus in, pellentesque imperdiet orci.</p>
<p>Fusce commodo ullamcorper ullamcorper. Etiam eget pellentesque quam, id sodales erat. Vestibulum risus magna, efficitur sed nisl et, rutrum consectetur odio. Sed at lorem non ligula consequat tempus vel nec risus.</p>
</section>
</article>
দিন এবং অর্ধেক পরে পোকার এবং উত্থিত হওয়ার পরে এবং এখানে দেওয়া হ্যাকি সমাধানগুলিতে খুশি না হয়ে , আমি আবিষ্কার করেছি যে সমস্যাটি একটি নতুন চিত্র অঙ্কন করার সময় উপাদানটিকে স্মৃতিতে রাখার মতো বলে মনে হয়েছিল। সমাধানটি ছিল SVG- র লিনিয়ার গ্রেডিয়েন্টের আইডিটিকে অনন্য করে তোলা, যদিও এটি প্রতি পৃষ্ঠায় কেবল একবারই ব্যবহৃত হত।
এটি বিভিন্ন উপায়ে অর্জন করা যেতে পারে তবে আমাদের কৌণিক অ্যাপ্লিকেশানের জন্য আমরা স্কোপে একটি পরিবর্তনশীল যুক্ত করতে লড্যাশ অনন্য আইড ফাংশনটি ব্যবহার করেছি:
কৌণিক নির্দেশিকা (জেএস):
scope.indicatorColourPatternId = _.uniqueId('IndicatorColourPattern');
এইচটিএমএল আপডেট:
লাইন 5: <linearGradient ng-attr-id="{{indicatorColourPatternId}}" x1="0" x2="0" y1="0" y2="1">
লাইন 11: <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" ng-attr-fill="url(#{{indicatorColourPatternId}})"/>
আমি আশা করি এই উত্তরটি অন্য কাউকে তাদের কীবোর্ডের মুখমণ্ডল করার জন্য কয়েক দিনের মূল্য সঞ্চয় করবে।