কীভাবে কোনও এসভিজির স্ট্রোক-প্রস্থ আঁকতে হয় তা আপনি নিয়ন্ত্রণ করতে পারেন?

204

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

যখন আমি বলার stroke-widthকোনও এসভিজি rectউপাদানটিতে একটি প্রয়োগ করি 1px, তখন স্ট্রোকটি rectবিভিন্ন ব্রাউজারের দ্বারা বিভিন্ন উপায়ে অফসেট এবং ইনসেটে প্রয়োগ করা হয় । এটি সমস্যাজনক হিসাবে প্রমাণিত হচ্ছে, বিশেষত যখন আমি একটি আয়তক্ষেত্রের বাইরের প্রস্থ এবং চাক্ষুষ অবস্থান গণনা করার চেষ্টা করি এবং এটি অন্যান্য উপাদানগুলির পাশে রাখি।

উদাহরণ স্বরূপ:

  • ফায়ারফক্স 1 পিএক্স ইনসেট (নীচে এবং বাম) এবং 1 পিএক্স অফসেট (উপরে এবং ডান) যুক্ত করেছে
  • ক্রোম 1px ইনসেট (উপরে এবং বাম), এবং 1px অফসেট (নীচে এবং ডান) যুক্ত করেছে

আমার একমাত্র সমাধান হ'ল আসল সীমানা নিজেই আঁকা (সম্ভবত pathসরঞ্জামের সাথে) এবং স্ট্রোক করা উপাদানটির পিছনে সীমানা স্থাপন করা। তবে এই সমাধানটি একটি অপ্রীতিকর কাজ, এবং আমি যদি সম্ভব হয় তবে এই রাস্তায় নামতে পছন্দ করব না।

সুতরাং আমার প্রশ্নটি হল, কীভাবে stroke-widthউপাদানগুলিতে একটি এসভিজি আঁকতে হয় তা আপনি নিয়ন্ত্রণ করতে পারেন ?

svg  offset  rect 
— স্টিভ
সূত্র
এটি অর্জনের জন্য আপনি ব্যবহার করতে পারেন এমন ফিল্টার হ্যাক রয়েছে - তবে এটি কোনও দুর্দান্ত সমাধান নয়
— মাইকেল মুল্লানি
2
নেই paint-orderপরামিতি, তুমি কোথায় নির্দিষ্ট করতে পারেন, যে ভরাট স্ট্রোকের উপরে রেন্ডার করা উচিত, তাই আপনি 'বাইরে প্রান্তিককরণ "পাবেন, দেখতে jsfiddle.net/hne0kyLg/1
— ইভান Kuckir
সিএসএস 'আউটলাইন-' বৈশিষ্ট্যগুলি ব্যবহার করে এটি করার একটি উপায় খুঁজে পেয়েছেন: codepen.io/badcat/pen/YVzmYY । ব্রাউজারগুলি জুড়ে এর জন্য সমর্থন কী তা নিশ্চিত নয় তবে এটি কার্যকর হতে পারে।
— বিপিএলএমপি

উত্তর:

375

না, আপনি কোনও উপাদানটির ভিতরে বা বাইরে স্ট্রোক আঁকছেন কিনা তা নির্দিষ্ট করতে পারবেন না। 2003 সালে এই কার্যকারিতাটির জন্য আমি এসভিজি ওয়ার্কিং গ্রুপকে একটি প্রস্তাব দিয়েছিলাম, তবে এটি কোনও সমর্থন (বা আলোচনা) পায়নি।

এসভিজি phrogz.net/SVG/stroke-location.svg থেকে স্ট্রোক-অবস্থান উদাহরণ প্রস্তাব করেছে

আমি প্রস্তাবটিতে উল্লেখ করেছি,

  • আপনি নিজের স্ট্রোকের প্রস্থ দ্বিগুণ করে এবং তারপরে অবজেক্টটিকে নিজের কাছে ক্লিপ করার জন্য একটি ক্লিপিং পাথ ব্যবহার করে এবং "অভ্যন্তর" হিসাবে একই ভিজ্যুয়াল ফলাফল অর্জন করতে পারেন এবং
  • স্ট্রোকের প্রস্থ দ্বিগুণ করে এবং তারপরে নিজের উপরের কোনও স্ট্রোকের অন-স্ট্রোক অনুলিপি করে আপনি 'বাইরের' মতো একই ভিজ্যুয়াল ফলাফল অর্জন করতে পারেন।

সম্পাদনা : এই উত্তরটি ভবিষ্যতে ভুল হতে পারে। এসভিজি ভেক্টর ইফেক্টগুলি ব্যবহার করে , ('ভিতরে' জন্য) বা ('বাহিরের জন্য' ) veStrokePathসাথে একত্রিত করে এই ফলাফলগুলি অর্জন করা সম্ভব । তবে, ভেক্টর ইফেক্টগুলি এখনও একটি কার্যকরী খসড়া মডিউল যা কোনও বাস্তবায়ন নেই যা আমি এখনও পাই না।veIntersectveExclude

সম্পাদনা 2 : এসভিজি 2 খসড়া স্পেসিফিকেশনটিতে একটি stroke-alignmentসম্পত্তি (কেন্দ্রে | ভিতরে | সম্ভাব্য মানের বাইরে) অন্তর্ভুক্ত রয়েছে। এই সম্পত্তিটি শেষ পর্যন্ত এটি সংযুক্ত আরব আমিরাতে তৈরি করতে পারে।

সম্পাদনা 3 : মজাদার এবং অসন্তুষ্টির সাথে, এসভিজি ওয়ার্কিং গ্রুপ stroke-alignmentএসভিজি ২ থেকে সরিয়ে নিয়েছে 2 আপনি এখানে গদ্যের পরে বর্ণিত কিছু উদ্বেগ দেখতে পারেন ।

— Phrogz
সূত্র
2
ভেবেছিল কেস হতে পারে। এটি সমাধানের জন্য আমি getBro () নামে getStrokedBBox () নামে একটি মোড়ক ফাংশন লিখেছি। ব্রাউজারটি কোনও আকারের ইনসেট এবং অফসেটে স্ট্রোক প্রয়োগ করে কীভাবে এই মোড়ক বিবিক্সকে ফেরত দেয়। এটি নিখুঁত নয় (সর্বশেষ ব্রাউজার সংস্করণগুলির বিরুদ্ধে পরীক্ষা করা প্রয়োজন) তবে এটি আপাতত আকারের বাইরের প্রস্থ সরবরাহ করে।
— স্টিভ
6
@ ফ্রোগজ সম্ভবত 10 বছর কেটে যাওয়ার আগে আমরা এটি দেখতে পাব। svgwg.org/svg2-draft/painting.html# স্পিফাইফাইং স্ট্রোক পেইন্ট টিকা
— ফরাসিওন
1
শেষ পর্যন্ত এখানে! আমি, একের জন্য, এই সম্পত্তিটি আসার জন্য সত্যই অনুরোধ করছি।
— mnsth
আমি যে কোনও এসভিজি জিওমেট্রি এলিমেন্টের কনট্যুর ট্রেস করার জন্য একটি এসভিজি-কনট্যুর স্ক্রিপ্ট তৈরি করেছি যা স্ট্রোক-সারিবদ্ধকরণের কাজ হিসাবে ব্যবহার করা যেতে পারে, আগ্রহী যে কারও জন্য আপনি এখানে
— মাইওম্যান
2
এমন কোনও পৃষ্ঠা আছে যেখানে আমি প্রস্তাবটির জন্য আপগেট করতে পারি? ধন্যবাদ। হাস্যকর মনে হচ্ছে এটি সমর্থিত নয়।
— মহীশ
57

আপডেট:stroke-alignment অ্যাট্রিবিউট 1 এপ্রিল, 2015 একটি সম্পূর্ণ নতুন বৈশিষ্ট করা SVG স্ট্রোক নামক সরানো ছিল ।

ফেব্রুয়ারী 26, 2015 এর এসভিজি ২.০ সম্পাদকের খসড়া হিসাবে (এবং সম্ভবত ১৩ ই ফেব্রুয়ারি থেকে ),stroke-alignmentসম্পত্তি উপস্থিতমান inner, center (ডিফল্ট) এবং outer।

এটি stroke-location@ ফ্রোগজ এবং পরবর্তী stroke-positionপরামর্শের প্রস্তাবিত সম্পত্তি হিসাবে একইভাবে কাজ করবে বলে মনে হচ্ছে । এই সম্পত্তিটি কমপক্ষে ২০১১ সাল থেকে পরিকল্পনা করা হয়েছে, তবে এমন একটি টীকা ছাড়াও

এসভিজি 2 স্ট্রোকের অবস্থান নির্দিষ্ট করার একটি উপায় অন্তর্ভুক্ত করবে

স্থগিত হওয়ায় এটিকে কখনই বিশদে বিশদ দেওয়া হয়নি - এখন পর্যন্ত মনে হয়।

কোনও ব্রাউজার এই সম্পত্তি সমর্থন করে না, বা যতদূর আমি জানি, নতুন এসভিজি 2 বৈশিষ্ট্যগুলির মধ্যে এখনও কোনওটি সমর্থন করে না তবে আশা করি তারা স্পষ্টভাবে পরিণত হওয়ার সাথে সাথেই তা ঘটবে। এটি এমন একটি সম্পত্তি যা আমি ব্যক্তিগতভাবে থাকার তাগিদ দিয়ে আসছি এবং আমি সত্যিই খুশী যে এটি শেষ পর্যন্ত এই অনুমানের মধ্যে রয়েছে।

খোলা পথের পাশাপাশি লুপগুলিতে সম্পত্তি কীভাবে আচরণ করা উচিত সে সম্পর্কে কিছু সমস্যা রয়েছে বলে মনে হয়। এই সমস্যাগুলি সম্ভবত ব্রাউজারগুলিতে দীর্ঘায়িত বাস্তবায়ন করবে। তবে ব্রাউজাররা এই সম্পত্তিটিকে সমর্থন করা শুরু করার সাথে সাথে আমি এই উত্তরটি নতুন তথ্য দিয়ে আপডেট করব।

— mnsth
সূত্র
1
stroke-alignmentএসভিজি স্ট্রোকস, একটি ডাব্লু 3 সি ওয়ার্কিং ড্রাফ্টে নির্দিষ্ট করা হয়েছে। এদিকে, এসভিজি 2 ডাব্লু 3 সি সম্পাদকের খসড়া বলেছে যে একটি স্ট্রোক পজিশনিং সম্পত্তি এসভিজি স্পেকের মধ্যে থাকবে এসভিজিভিজি.আর / এসভিজি ২-ড্রাফট / স্পেনিং এইচটিএমএল # স্পেসিফাইটিংস্ট্রোকপেইন্ট , তবে সেই অনুমানটি ইতিমধ্যে ডাব্লু 3 সি পরীক্ষার্থীর প্রস্তাবের স্থিতিতে পৌঁছেছে এবং এরকম কোনও সম্পত্তি নেই is stroke-positionপ্রস্তাবের লিঙ্ক থেকে আলাদা করে স্পেসে মনে হচ্ছে এটি এমন হবে না।
— প্যাট্রিক ডার্ক
47

আমি একটি সহজ উপায় পেয়েছি, যার কয়েকটি বিধিনিষেধ রয়েছে, তবে আমার পক্ষে কাজ করেছে:

  • Defs মধ্যে আকার নির্ধারণ করুন
  • আকৃতিটি উল্লেখ করে একটি ক্লিপ পথ নির্ধারণ করুন
  • এটি ব্যবহার করুন এবং বাইরের ক্লিপ হিসাবে স্ট্রোক দ্বিগুণ করুন

এখানে একটি কাজের উদাহরণ:

<svg width="240" height="240" viewBox="0 0 1024 1024">
<defs>
	<path id="ld" d="M256,0 L0,512 L384,512 L128,1024 L1024,384 L640,384 L896,0 L256,0 Z"/>
	<clipPath id="clip">
		<use xlink:href="#ld"/>
	</clipPath>
</defs>
<g>
	<use xlink:href="#ld" stroke="#0081C6" stroke-width="160" fill="#00D2B8" clip-path="url(#clip)"/>
</g>
</svg>
স্নিপেট প্রসারিত করুন

— জর্গ জান্কে
সূত্র
2
আমি সবচেয়ে ভাল উত্তর খুঁজে পেয়েছি
— এড কলোসভস্কি
1
চতুর সমাধান। ধন্যবাদ
— ভিন্স ইউয়ান
এটি উত্তর হিসাবে গ্রহণ করা উচিত। <defs> এবং <use> ব্যবহার করা বর্তমানে সর্বাধিক মার্জিত সমাধান।
— নায়ারগডস
সুন্দর সমাধান। বাইরের স্ট্রোক করতে আপনি কীভাবে এটি বিপরীত করবেন?
— লুসেন্ট
কেন শীর্ষ স্তরের <use>? সরাসরি পথ এবং ক্লিপ পথটি কেন সরাসরি রাখবেন না? এই মাত্র কাজ করে জরিমানা: <svg width="240" height="240" viewBox="0 0 1024 1024"> <path id="ld" d="M256,0 L0,512 L384,512 L128,1024 L1024,384 L640,384 L896,0 L256,0 Z" clip-path="url(#clip)" stroke="#0081C6" stroke-width="160" fill="#00d2b8"/> <clipPath id="clip"> <use xlink:href="#ld"/> </clipPath> </svg>। (হ্যাঁ, এটি সম্পূর্ণ যুক্তিসঙ্গত এবং সঠিক এসভিজি এবং সর্বত্র সঠিকভাবে রেন্ডার হবে no পুনরাবৃত্তি হওয়ার ভয় নেই))
— ক্রিস মরগান
30

স্ট্রোক এবং পূরণের ক্রমকে স্টাইল করতে আপনি CSS ব্যবহার করতে পারেন। এটি হ'ল প্রথমে স্ট্রোক করুন এবং তারপরে দ্বিতীয়টি পূরণ করুন এবং পছন্দসই প্রভাব পান।

MDN চালু paint-order: https://developer.mozilla.org/en-US/docs/Web/SVG/Atribute/paint-order

সিএসএস কোড:

paint-order: stroke;
— জাভিয়ের হো
সূত্র
এটি নিখুঁত! ভাগ করে নেওয়ার জন্য ধন্যবাদ
— ব্রুনোফেনজল
1
লিঙ্কযুক্ত ডকুমেন্টেশনগুলি স্ট্রোকটি ভিতরে, বাইরে বা কেন্দ্রিক কিনা তা বোঝায় না? স্ট্রোকটি যেখানে আঁকছে সেখানে কীভাবে নিয়ন্ত্রণ করতে হবে তা আপনি কী ব্যাখ্যা করতে পারেন? ধন্যবাদ।
— ক্র্যাশলোট
2
স্ট্রোকটি কেন্দ্রীভূত, যেমনটি সর্বদা ছিল — তবে আপনার যদি দৃ fill় পরিপূর্ণতা থাকে তবে প্রথমে স্ট্রোক আঁকার জন্য পেইন্ট ক্রমটি সামঞ্জস্য করার প্রভাব হ'ল স্ট্রোকের অভ্যন্তরীণ অর্ধেকটি আঁকা হয় যা একটি অঙ্কন করার মতোই প্রভাব ফেলে আধা হিসাবে পুরু স্ট্রোক বাইরে।
— ক্রিস মরগান
7

এখানে একটি ফাংশন যা গণনা করবে যে আপনাকে প্রদত্ত স্ট্রোকটি ব্যবহার করে - উপরে, ডানদিকে, নীচে এবং বামে, সমস্ত ব্রাউজারের ভিত্তিতে কত পিক্সেল যুক্ত করতে হবে:

var getStrokeOffsets = function(stroke){

        var strokeFloor =       Math.floor(stroke / 2),                                                                 // max offset
            strokeCeil =        Math.ceil(stroke / 2);                                                                  // min offset

        if($.browser.mozilla){                                                                                          // Mozilla offsets

            return {
                bottom:     strokeFloor,
                left:       strokeFloor,
                top:        strokeCeil,
                right:      strokeCeil
            };

        }else if($.browser.webkit){                                                                                     // WebKit offsets

            return {
                bottom:     strokeCeil,
                left:       strokeFloor,
                top:        strokeFloor,
                right:      strokeCeil
            };

        }else{                                                                                                          // default offsets

            return {
                bottom:     strokeCeil,
                left:       strokeCeil,
                top:        strokeCeil,
                right:      strokeCeil
            };

        }

    };
— স্টিভ
সূত্র
6

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

Adobe এর পোস্টস্ক্রিপ্ট ম্যানুয়াল 2nd সংস্করণ রাজ্যে স্ট্রোক জন্য স্পেসিফিকেশন: " 4.5.1 দেবে: স্ট্রোক অপারেটর বর্তমান পথ বরাবর কিছু বেধ একটি লাইন স্বপক্ষে পথে প্রতিটি সোজা বা বাঁকা অংশে অন্তর্ভুক্ত করার জন্য। স্ট্রোক একটি লাইন যে স্বপক্ষে কেন্দ্রিক উপর বিভাগগুলির সাথে সমান্তরাল দিকগুলির বিভাগটি। (জোর তাদের)

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

যেহেতু ইনসক্যাপের নেটিভ ফর্ম্যাটটি এসভিজি হ'ল, এটি কোনও বৈশিষ্ট্যের অভাব নেই এমন কোনও বৈশিষ্ট্য সরবরাহ করতে পারে না।

— user1574945
সূত্র
4

অভ্যন্তরীণ সীমানা rect ব্যবহার করে symbolএবং এর জন্য এখানে প্রায় কাজ use।

উদাহরণ : https://jsbin.com/yopemiwame/edit?html , আউটপুট

এসভিজি :

<svg>
  <symbol id="inner-border-rect">
    <rect class="inner-border" width="100%" height="100%" style="fill:rgb(0,255,255);stroke-width:10;stroke:rgb(0,0,0)">
  </symbol>
  ...
  <use xlink:href="#inner-border-rect" x="?" y="?" width="?" height="?">
</svg>

নোট: প্রতিস্থাপন করতে নিশ্চিত করুন ?যে useবাস্তব মান।

পটভূমি : কেন এই কাজ করে কারণ প্রতীক প্রতিস্থাপন করে একটি নতুন ভিউপোর্ট স্থাপন করে symbolসঙ্গে svgএবং ছায়া DOM মধ্যে একটি উপাদান তৈরি করা। এই svgছায়া DOM এর পরে আপনার বর্তমান SVGউপাদানটির সাথে লিঙ্ক করা আছে । নোট করুন যে svgগুলি বাসাতে পারে এবং প্রত্যেকটি svgএকটি নতুন ভিউপোর্ট তৈরি করে , যা ওভারল্যাপিং বর্ডার সহ ওভারল্যাপ করে থাকা সমস্ত কিছুকে ক্লিপ করে। সারা সৌইদানের এই দুর্দান্ত নিবন্ধটি কী পড়ছে তার আরও বিশদ ওভারভিউয়ের জন্য।

— এফ লেকচাস
সূত্র
2

আমি জানি না যে এটি কতটা সহায়ক হতে পারে তবে আমার ক্ষেত্রে আমি কেবলমাত্র সীমান্ত দিয়ে অন্য একটি বৃত্ত তৈরি করেছি এবং এটি অন্য আকারের ভিতরে "ভিতরে" রেখেছি।

— সাক্ষী
সূত্র
0

একটি (নোংরা) সম্ভাব্য সমাধান হ'ল নিদর্শনগুলি ব্যবহার করে,

এখানে একটি অভ্যন্তরীণ স্ট্রোকড ত্রিভুজ সহ একটি উদাহরণ রয়েছে:

https://jsfiddle.net/qr3p7php/5/

<style>
#triangle1{
  fill: #0F0;
  fill-opacity: 0.3;
  stroke: #000;
  stroke-opacity: 0.5;
  stroke-width: 20;
}
#triangle2{
  stroke: #f00;
  stroke-opacity: 1;
  stroke-width: 1;
}    
</style>

<svg height="210" width="400" >
    <pattern id="fagl" patternUnits="objectBoundingBox" width="2" height="1" x="-50%">
        <path id="triangle1" d="M150 0 L75 200 L225 200 Z">
    </pattern>    
    <path id="triangle2" d="M150 0 L75 200 L225 200 Z" fill="url(#fagl)"/>
</svg>
— সর্বোচ্চ-লে
সূত্র
0

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

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

কৌশলটি দুটি স্তরে আকৃতিটি প্রদর্শন করা। একটি স্ট্রোক ছাড়াই (কেবল পূরণ করুন), এবং অন্যটি কেবল স্ট্রোক সহ ডাবল প্রস্থে (স্বচ্ছ ফিল) এবং একটি মাস্কের মধ্য দিয়ে গেছে যা পুরো আকারটি দেখায়, তবে স্ট্রোক ছাড়াই মূল আকারটি লুকিয়ে রাখে।

  <svg width="240" height="240" viewBox="0 0 1024 1024">
  <defs>
    <path id="ld" d="M256,0 L0,512 L384,512 L128,1024 L1024,384 L640,384 L896,0 L256,0 Z"/>
    <mask id="mask">
      <use xlink:href="#ld" stroke="#FFFFFF" stroke-width="160" fill="#FFFFFF"/>
      <use xlink:href="#ld" fill="#000000"/>
    </mask>
  </defs>
  <g>
    <use xlink:href="#ld" fill="#00D2B8"/>
    <use xlink:href="#ld" stroke="#0081C6" stroke-width="160" fill="red" mask="url(#mask)"/>
  </g>
  </svg>
— hirunatan
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.