এসভিজি পাঠ্যে স্বয়ংক্রিয় লাইন মোড়ানো
উত্তর:
পাঠ্য মোড়ক SVG1.1 এর অংশ নয়, বর্তমানে প্রয়োগ করা বিশেষ। পরিবর্তে <foreignObject/>উপাদানটির মাধ্যমে এইচটিএমএল ব্যবহার করা উচিত ।
<svg ...>
<switch>
<foreignObject x="20" y="90" width="150" height="200">
<p xmlns="http://www.w3.org/1999/xhtml">Text goes here</p>
</foreignObject>
<text x="20" y="20">Your SVG viewer cannot display html.</text>
</switch>
</svg>
5
এটি স্যুইচ ব্যবহারের ভুল উপায়, এটি এসভিজি স্পেক-এ সংজ্ঞায়িত ফিচারস্ট্রিংগুলির একটি ব্যবহার করতে হবে। ফলব্যাক কখনও আপনার উদাহরণ ব্যবহার করা হবে না। দেখুন w3.org/TR/SVG11/feature.html এবং w3.org/TR/SVG11/struct.html#SwitchElement ।
—
এরিক ডাহলস্ট্রোম
এছাড়াও <বিদেশী অবজেক্ট /> IE- এ সমর্থিত নয়
—
ডগ আমোস
তবে সচেতন থাকবেন যে সমস্ত ইঞ্জিনই বিদেশীঅবজেক্টগুলি রেন্ডার করতে পারে না। বিশেষত বাটিক তা করে না।
—
hrabinowitz
এখানে একটি বিকল্প রয়েছে:
<svg ...>
<switch>
<g requiredFeatures="http://www.w3.org/Graphics/SVG/feature/1.2/#TextFlow">
<textArea width="200" height="auto">
Text goes here
</textArea>
</g>
<foreignObject width="200" height="200"
requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<p xmlns="http://www.w3.org/1999/xhtml">Text goes here</p>
</foreignObject>
<text x="20" y="20">No automatic linewrapping.</text>
</switch>
</svg>উল্লেখ করে যে বিদেশীঅবজেক্টটি সেই বৈশিষ্ট্যযুক্ত স্ট্রিংয়ের সাহায্যে সমর্থিত হিসাবে প্রতিবেদন করা হতে পারে, তার কোনও গ্যারান্টি নেই যে এইচটিএমএল প্রদর্শিত হতে পারে কারণ এসভিজি ১.১ স্পেসিফিকেশন দ্বারা এটি প্রয়োজনীয় নয় required এই মুহুর্তে এইচটিএমএল-ইন-বিদেশী সাহায্যের জন্য কোনও বৈশিষ্ট্যযুক্ত নেই তবে এটি এখনও অনেকগুলি ব্রাউজারে সমর্থিত তাই ভবিষ্যতে এটি সম্ভবত প্রয়োজনীয় বৈশিষ্ট্যযুক্ত স্ট্রিংয়ের সাথে প্রয়োজনীয় হয়ে উঠবে।
নোট করুন যে এসভিজি টিনি 1.2 এর 'টেক্সটআরিয়া' উপাদানটি সমস্ত স্ট্যান্ডার্ড এসভিজি বৈশিষ্ট্যগুলিকে সমর্থন করে, যেমন উন্নত ফিলিং ইত্যাদি and বিদেশী অবজেক্ট ক্লিপিং ভিউপোর্ট হিসাবে কাজ করে।
দ্রষ্টব্য: উপরের উদাহরণটি বৈধ এসভিজি ১.১ সামগ্রী হিসাবে রয়েছে, এসভিজি ২-তে 'প্রয়োজনীয় বৈশিষ্ট্যগুলি' বৈশিষ্ট্যটি সরানো হয়েছে, যার অর্থ 'সুইচ' উপাদানটি এসভিজি ১.২ 'টেক্সটআরিয়ার সমর্থন না করেই প্রথম' জি 'উপাদান রেন্ডার চেষ্টা করবে 'উপাদান। দেখুন SVG2 সুইচ উপাদান বৈশিষ্ট ।
আমি এফএফ-তে এই কোডটি পরীক্ষা করছিলাম, ব্রাউজারটি আমাকে পাঠ্যআরিয়া উপাদান বা বিদেশীঅবজেক্ট শিশুটি দেখায় নি। তারপরে অনুমানটি পড়ার পরে, খুঁজে পাওয়া গেল যে প্রয়োজনীয় বৈশিষ্ট্যযুক্ত বৈশিষ্ট্যটি এমনভাবে আচরণ করে যখন এর তালিকাটি মিথ্যা হিসাবে প্রমাণিত হয়, যে উপাদানটিতে প্রয়োজনীয় বৈশিষ্ট্যযুক্ত বৈশিষ্ট্য রয়েছে এবং এর শিশুরা প্রক্রিয়াজাত হয় না। সুতরাং স্যুইচ উপাদান জন্য কোন প্রয়োজন হবে না। আমি স্যুইচ উপাদানটি সরানোর পরে, বিদেশীঅবজেক্ট বাচ্চারা দৃশ্যমান ছিল (কারণ আমার ব্রাউজারটি (এফএফ, 8.01) এসভিজি 1.1 সমর্থন করে)। সুতরাং আমি মনে করি এখানে সুইচ উপাদানটির কোনও প্রয়োজন নেই। আমাকে বুঝতে দাও.
—
রাজকামাল সুব্রমনিয়ান
<g> উপাদান ব্যবহার করতে এখন আপডেট হয়েছে। এসভিজি স্পেক অজানা উপাদানগুলিতে 'প্রয়োজনীয় বৈশিষ্ট্যগুলি' দেখতে দর্শকদের বলেনি, সুতরাং এটির উদ্দেশ্যে কাজ করার জন্য একটি পরিচিত এসভিজি উপাদান ব্যবহার করতে হবে।
—
এরিক ডালস্ট্রোম
ধন্যবাদ! এর
—
jhndodo
xhtml:divপরিবর্তে আমার ব্যবহারের দরকার ছিল div, তবে এটি d3.js এর কারণ হতে পারে। আমি টেক্সটফ্লো সম্পর্কে কোনও দরকারী রেফারেন্স পাইনি, এটি (এখনও) বিদ্যমান আছে বা এটি কেবল কোনও খসড়াতে ছিল?
এটি লক্ষ করা উচিত যে টেক্সেরিয়া মনে হয় বুগজিলা.মোজিলা.আর
—
জর্জ মাউয়ার
উদাহরণ ক্রোমে কাজ করে না। অন্যান্য ব্রাউজারে পরীক্ষা করা হয়নি।
—
posfan12
পাঠ্যপথটি কিছু ক্ষেত্রে ভাল হতে পারে।
<svg width="200" height="200"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<!-- define lines for text lies on -->
<path id="path1" d="M10,30 H190 M10,60 H190 M10,90 H190 M10,120 H190"></path>
</defs>
<use xlink:href="#path1" x="0" y="35" stroke="blue" stroke-width="1" />
<text transform="translate(0,35)" fill="red" font-size="20">
<textPath xlink:href="#path1">This is a long long long text ......</textPath>
</text>
</svg>
কেবলমাত্র এমন ক্ষেত্রে যেখানে মাঝের শব্দটি মোড়ানো (এবং হাইফেনটিং নয়) গ্রহণযোগ্য। আমি আর্ট প্রকল্পের বাইরে অনেকগুলি ক্ষেত্রে ভাবতে পারি না যেখানে এটি ঠিক। http://jsfiddle.net/nilloc/vL3zj/
—
নিলোক
@ নিলোক সবাই ইংরেজি ব্যবহার করেন না, এই পদ্ধতিটি চীনা, জাপানি বা কোরিয়ানদের পক্ষে সম্পূর্ণ জরিমানা।
—
জাং মিংজি
চরিত্রভিত্তিক (লোগোগ্রাফিক) ভাষাগুলির জন্য @ জাঙ্গমিংজি জড়ানো মোড়ক শব্দগুলি বিভক্ত শব্দের চেয়ে একেবারে পৃথক ব্যবহারের ক্ষেত্রে বলে মনে হচ্ছে। যা সমস্ত রোমান্টিক / লাতিন / সিরিলিক / আরবিক (ফোনোগ্রাফিক) ভাষায় গুরুত্বপূর্ণ, যা আমার বক্তব্য ছিল।
—
নিলোক
@ মাইক গ্লেডহিলের কোডে বিল্ডিং করে আমি এটিকে আরও একধাপ এগিয়ে নিয়েছি এবং আরও পরামিতি যুক্ত করেছি। আপনার যদি কোনও এসভিজি আরসিটি থাকে এবং পাঠ্যের অভ্যন্তরে মোড়ানো চান তবে এটি কার্যকর হতে পারে:
function wraptorect(textnode, boxObject, padding, linePadding) {
var x_pos = parseInt(boxObject.getAttribute('x')),
y_pos = parseInt(boxObject.getAttribute('y')),
boxwidth = parseInt(boxObject.getAttribute('width')),
fz = parseInt(window.getComputedStyle(textnode)['font-size']); // We use this to calculate dy for each TSPAN.
var line_height = fz + linePadding;
// Clone the original text node to store and display the final wrapping text.
var wrapping = textnode.cloneNode(false); // False means any TSPANs in the textnode will be discarded
wrapping.setAttributeNS(null, 'x', x_pos + padding);
wrapping.setAttributeNS(null, 'y', y_pos + padding);
// Make a copy of this node and hide it to progressively draw, measure and calculate line breaks.
var testing = wrapping.cloneNode(false);
testing.setAttributeNS(null, 'visibility', 'hidden'); // Comment this out to debug
var testingTSPAN = document.createElementNS(null, 'tspan');
var testingTEXTNODE = document.createTextNode(textnode.textContent);
testingTSPAN.appendChild(testingTEXTNODE);
testing.appendChild(testingTSPAN);
var tester = document.getElementsByTagName('svg')[0].appendChild(testing);
var words = textnode.textContent.split(" ");
var line = line2 = "";
var linecounter = 0;
var testwidth;
for (var n = 0; n < words.length; n++) {
line2 = line + words[n] + " ";
testing.textContent = line2;
testwidth = testing.getBBox().width;
if ((testwidth + 2*padding) > boxwidth) {
testingTSPAN = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
testingTSPAN.setAttributeNS(null, 'x', x_pos + padding);
testingTSPAN.setAttributeNS(null, 'dy', line_height);
testingTEXTNODE = document.createTextNode(line);
testingTSPAN.appendChild(testingTEXTNODE);
wrapping.appendChild(testingTSPAN);
line = words[n] + " ";
linecounter++;
}
else {
line = line2;
}
}
var testingTSPAN = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
testingTSPAN.setAttributeNS(null, 'x', x_pos + padding);
testingTSPAN.setAttributeNS(null, 'dy', line_height);
var testingTEXTNODE = document.createTextNode(line);
testingTSPAN.appendChild(testingTEXTNODE);
wrapping.appendChild(testingTSPAN);
testing.parentNode.removeChild(testing);
textnode.parentNode.replaceChild(wrapping,textnode);
return linecounter;
}
document.getElementById('original').onmouseover = function () {
var container = document.getElementById('destination');
var numberoflines = wraptorect(this,container,20,1);
console.log(numberoflines); // In case you need it
};
ধন্যবাদ। এটি ক্রোমে পুরোপুরি কাজ করে। তবে এটি ফায়ার ফক্সে কাজ করে না। এটি ডেমো লিঙ্কে বলে। অপ্রত্যাশিত মান ন্যান এনবি বৈশিষ্টকে পার্সিং করে। svgtext_clean2.htm: 117 চারপাশে একটি কাজ সন্ধান করার চেষ্টা করছে।
—
অক্ষয়ব
পরবর্তীতে আমি এটি ফায়ারফক্সে কাজ করতে পেলাম। আপনি এখানে যান:
—
এমএসসি
(এখনই খুব শীঘ্রই ENTER টিপুন)) পরে আমি এটি ফায়ারফক্স এবং আইইতে কাজ করতে পেলাম। আপনার যদি কিছু সহায়তার প্রয়োজন হয় তবে ডেমোক্র্যাট.মেয়েরা / wrap_8_may_2014.htm দেখুন । কোডটিতে ফায়ারফক্স সম্পর্কে একটি মন্তব্য রয়েছে।
—
এমএসসি
আপনি দেখতে পাচ্ছেন, আমি বাউন্ডিং বক্সটি সঙ্কুচিত করতে নীচে বা নীচে বা ডানদিকে সঠিকভাবে একটি উপবৃত্ত দিয়ে কাটাতে কোডটি অনেক প্রসারিত করেছি।
—
এমএসসি
আমি এমএসসির কোডে একটি লাইন পরিবর্তন করব:,
—
ম্যাসিমিলিয়ানো ক্যানিপারোলি
boxwidth = parseInt(boxObject.getAttribute('width'))মাত্র পিক্সেলের প্রস্থ গ্রহণ করবে, যখন boxwidth = parseInt(boxObject.getBBox().width)কোনও ধরণের পরিমাপের ইউনিট গ্রহণ করবে
এই কার্যকারিতাটি জাভাস্ক্রিপ্ট ব্যবহার করে যুক্ত করা যেতে পারে। কার্টো.নেটের একটি উদাহরণ রয়েছে:
http://old.carto.net/papers/svg/textFlow/
আপনি সম্পাদনাযোগ্য পাঠ্য অঞ্চল হ'ল এমন কিছু জিনিস যা আপনার পক্ষে কার্যকর হতে পারে:
404 - এই লিঙ্কগুলি ভাঙা হয়েছে
—
ম্যাথিয়াস
নিম্নলিখিত কোডটি ঠিকঠাক কাজ করছে। কোড স্নিপেট এটি করে যা চালান।
হতে পারে এটি পরিষ্কার হয়ে যেতে পারে বা এসভিজিতে সমস্ত পাঠ্য ট্যাগের সাথে এটি স্বয়ংক্রিয়ভাবে কাজ করতে পারে।
function svg_textMultiline() {
var x = 0;
var y = 20;
var width = 360;
var lineHeight = 10;
/* get the text */
var element = document.getElementById('test');
var text = element.innerHTML;
/* split the words into array */
var words = text.split(' ');
var line = '';
/* Make a tspan for testing */
element.innerHTML = '<tspan id="PROCESSING">busy</tspan >';
for (var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var testElem = document.getElementById('PROCESSING');
/* Add line in testElement */
testElem.innerHTML = testLine;
/* Messure textElement */
var metrics = testElem.getBoundingClientRect();
testWidth = metrics.width;
if (testWidth > width && n > 0) {
element.innerHTML += '<tspan x="0" dy="' + y + '">' + line + '</tspan>';
line = words[n] + ' ';
} else {
line = testLine;
}
}
element.innerHTML += '<tspan x="0" dy="' + y + '">' + line + '</tspan>';
document.getElementById("PROCESSING").remove();
}
svg_textMultiline();body {
font-family: arial;
font-size: 20px;
}
svg {
background: #dfdfdf;
border:1px solid #aaa;
}
svg text {
fill: blue;
stroke: red;
stroke-width: 0.3;
stroke-linejoin: round;
stroke-linecap: round;
}<svg height="300" width="500" xmlns="http://www.w3.org/2000/svg" version="1.1">
<text id="test" y="0">GIETEN - Het college van Aa en Hunze is in de fout gegaan met het weigeren van een zorgproject in het failliete hotel Braams in Gieten. Dat stelt de PvdA-fractie in een brief aan het college. De partij wil opheldering over de kwestie en heeft schriftelijke
vragen ingediend. Verkeerde route De PvdA vindt dat de gemeenteraad eerst gepolst had moeten worden, voordat het college het plan afwees. "Volgens ons is de verkeerde route gekozen", zegt PvdA-raadslid Henk Santes.</text>
</svg>
এসভিজি পাঠ্যে স্বয়ংক্রিয় রেখা মোড়ানো :) পাঠ্য দীর্ঘ হওয়ার সাথে সাথে আমার জাভাস্ক্রিপ্ট কোড লাইন তৈরি করে। এসভিজির অভ্যন্তরে সমস্ত পাঠ্য ট্যাগগুলিতে কাজ করা ভাল লাগবে। জাভাস্ক্রিপ্টে id = "" পরিবর্তন না করে স্বয়ংক্রিয়। খারাপ এসভিজি দোস্তের কাছে নিজে থেকেই বহু-লাইন থাকে।
—
পিটার
দুর্দান্ত সমাধান, তবে আপনি এটি কেন্দ্রে সারিবদ্ধ করতে পারেন?
—
ক্রেইমির গালি
উত্তর টিবিএইচ গ্রহণ করা উচিত। জাভাস্ক্রিপ্ট সমাধান যথেষ্ট ন্যূনতম এবং অর্থপূর্ণ।
—
জ্যাক
আমি এখানে এসভিজি "পাঠ্য" উপাদানটিতে কিছু জাল শব্দ-মোড়ক যুক্ত করার জন্য নিম্নলিখিত ওয়াকথ্রু পোস্ট করেছি:
এসভিজি ওয়ার্ড মোড়ানো - স্টপার দেখান?
আপনাকে কেবল একটি সাধারণ জাভাস্ক্রিপ্ট ফাংশন যুক্ত করতে হবে যা আপনার স্ট্রিংকে ছোট "tspan" উপাদানগুলিতে বিভক্ত করে। দেখতে দেখতে এটির উদাহরণ এখানে:
আশাকরি এটা সাহায্য করবে !