Rumah >hujung hadapan web >tutorial css >Nombor Baris untuk menggunakan SVG</p><!-- <p><a href="https://m.php.cn/ms/article.html" class="cBlack">Artikel teknikal</a>  >  <a href="https://m.php.cn/ms/web-designer.html" class="cBlack">hujung hadapan web</a> > <a href="https://m.php.cn/ms/css-tutorial.html" class="cBlack">tutorial css</a> > Nombor Baris untuk <textarea> menggunakan SVG</p> --><div class="clear"></div></div></div><div class="nphpQianBox"><div class="nphpQianTitle"><h1>Nombor Baris untuk <textarea> menggunakan SVG</h1><div class="nphpQianTitleIn"><span><img data-src="https://img.php.cn/upload/avatar/000/465/014/627b58ba8fa6c600.jpg" alt="王林" class="lazyload" src="/static/front/mobimages/moren/moren.png" /></span><dl><dt><em>王林</em><i class='bg1'>asal</i><div class="clear"></div></dt><dd><em>2024-08-19 18:33:32</em><i>538semak imbas</i><div class="clear"></div></dd></dl><div class="clear"></div></div></div><div class="nphpQianCont wenda-list"><p>Pada hari lain saya sedang mengusahakan JSON Schema Generator, dan mahu memaparkan nombor baris dalam <textarea>. Tiada apa-apa yang mewah dan tidak mempertimbangkan pemecahan talian yang lembut atau apa-apa yang rumit dari jauh.</p> <p>Saya melakukan beberapa penyelidikan dan menemui pelbagai pendekatan:</p> <ol> <li>Menggunakan imej latar belakang (TinyMCE melakukannya, menggunakan PNG)</li> <li>Menggunakan <ol> senarai pesanan. </li> </ol> <p>Saya tidak menyukai mana-mana daripada mereka! Yang pertama tidak kelihatan segar — dan tidak sepadan dengan gaya yang telah saya sediakan untuk elemen <textarea>-saya.</p> <p>Yang kedua memerlukan sekumpulan JavaScript untuk mengekalkan senarai tertib itu: menambah/mengalih keluar <li>-elemen secara dinamik, menyegerakkan acara tatal dan banyak lagi.</p> <p>Jadi saya akhirnya mencipta hibrid. </p> <p>Ia ialah SVG yang dijana secara dinamik, disimpan sebagai <em>Harta Tersuai CSS</em> — dan digunakan sebagai imej latar belakang, mewarisi gaya daripada elemen <textarea>-induknya.</p> <p><img src="https://img.php.cn/upload/article/000/000/000/172406361393154.png" alt="Line Numbers for <textarea> menggunakan SVG"></p> <p>Jom selami.</p> <hr> <h2> JavaScript </h2> <p>Pertama, kaedah utama:<br> </p> <pre class="brush:php;toolbar:false">lineNumbers(element, numLines = 50, inline = false) </pre> <p>elemen ialah <textarea> elemen untuk digunakan, numLines bilangan baris untuk dipaparkan dan sebaris menunjukkan sama ada untuk menyimpan imej yang dijana pada elemen (true) atau pada document.body (false).</p> <p>Seterusnya, kami mentakrifkan awalan untuk sifat tersuai:<br> </p> <pre class="brush:php;toolbar:false">const prefix = '--linenum-'; </pre> <p>Sebelum kami meneruskan, kami menyemak sama ada hendak menggunakan semula mana-mana harta sedia ada:<br> </p> <pre class="brush:php;toolbar:false">if (!inline) { const styleString = document.body.getAttribute('style') || ''; const regex = new RegExp(`${prefix}[^:]*`, 'g'); const match = styleString.match(regex); if (match) { element.style.backgroundImage = `var(${match[0]})`; return; } } </pre> <p>Seterusnya, kami <strong>mengekstrak</strong> gaya daripada elemen, menjadikan SVG dengan keluarga fon, saiz fon, ketinggian garis dsb. yang sama :<br> </p> <pre class="brush:php;toolbar:false">const bgColor = getComputedStyle(element).borderColor; const fillColor = getComputedStyle(element).color; const fontFamily = getComputedStyle(element).fontFamily; const fontSize = parseFloat(getComputedStyle(element).fontSize); const lineHeight = parseFloat(getComputedStyle(element).lineHeight) / fontSize; const paddingTop = parseFloat(getComputedStyle(element).paddingTop) / 2; const translateY = (fontSize * lineHeight).toFixed(2); </pre> <p>Kami memerlukan id rawak untuk harta kami juga:<br> </p> <pre class="brush:php;toolbar:false">const id = `${prefix}${Math.random().toString(36).substr(2, 6)}`; </pre> <p>Dan kini tiba masanya untuk memaparkan SVG:<br> </p> <pre class="brush:php;toolbar:false">const svg = `<svg xmlns="http://www.w3.org/2000/svg"> <style> svg { background: ${bgColor}; } text { fill: hsl(from ${fillColor} h s l / 50%); font-family: ${fontFamily}; font-size: ${fontSize}px; line-height: ${lineHeight}; text-anchor: end; translate: 0 calc((var(--n) * ${translateY}px) + ${paddingTop}px); } </style> ${Array.from({ length: numLines }, (_, i) => `<text x="90%" style="--n:${i + 1};">${i + 1}</text>`).join("")} </svg>`; </pre> <p><strong>Mari kita pecahkan:</strong></p> <p>Dalam bahagian <style>-kami hanya menetapkan gaya yang kami ekstrak daripada <textarea> lebih awal. Daripada menggunakan atribut y dan dy untuk elemen <text>-, kami hanya menggunakan --n-property untuk menterjemah elemen teks menggunakan CSS.</p> <p>Bahagian terakhir mengulang tatasusunan yang dibuat daripada numLines dan menambahkan <teks>-elemen pada SVG utama.</p> <p>Kita hampir sampai!</p> <hr> <p>Untuk menggunakan SVG yang dijana sebagai url()-property, kita perlu <strong>mengekod</strong>nya:<br> </p> <pre class="brush:php;toolbar:false">const encodedURI = `url("data:image/svg+xml,${encodeURIComponent(svg)}")`; </pre> <p>Dan akhirnya, kami menetapkan sifat itu pada sama ada elemen atau badan dokumen:<br> </p> <pre class="brush:php;toolbar:false">const target = inline ? element : document.body; target.style.setProperty(id, encodedURI); element.style.backgroundImage = `var(${id})`; </pre> <p><strong>Dan itu sahaja!</strong></p> <p>Tidak terlalu teruk, dan hanya 610 bait, dikecilkan dan dimampatkan!</p> <hr> <h2> Demo </h2> <p>Anda boleh melihat demo di sini dan muat turun skrip penuh di sini.</p> <p>Di bawah ialah Codepen yang dipermudahkan, tidak menggunakan logik sifat sebaris:</p> <p><iframe height="600" src="https://codepen.io/stoumann/embed/LYKQZKr?height=600&default-tab=result&embed-version=2" scrolling="no" frameborder="no" allowtransparency="true" loading="lazy" style="width: 100%;"> </iframe> </p> <hr> <h2> Kebaikan dan Keburukan </h2> <p>Ada kebaikan dan keburukan? Sudah tentu ada! </p> <p>Secara peribadi — untuk projek semasa saya — saya memerlukan cara yang ringkas dan jelas untuk menambah nombor baris pada pratonton JSON dalam <textarea>, dan kaedah ini sesuai.</p> <h3> Kebaikan </h3> <h4> Manipulasi DOM yang dikurangkan </h4> <p>Kaedah ini tidak bergantung pada memanipulasi DOM. Nombor baris dijana sebagai SVG tunggal, disimpan dalam Harta Tersuai CSS.</p> <h4> Penyegerakan Automatik </h4> <p>Memandangkan nombor baris adalah sebahagian daripada imej latar belakang, ia secara automatik menatal dengan kandungan teks, menghapuskan keperluan untuk logik penyegerakan manual.</p> <h4> Kebolehgunaan Semula Merentas Elemen </h4> <p>Dengan menyimpan SVG yang dijana dalam Harta Tersuai CSS, ia boleh digunakan semula merentas berbilang elemen. Ini bermakna jika beberapa elemen memerlukan nombor baris yang sama, mereka semua boleh merujuk sifat tersuai yang sama, mengelakkan penjanaan SVG yang berlebihan.</p> <h4> Kebolehskalaan </h4> <h2> Sifat vektor SVG memastikan nombor baris kekal jelas dan jelas pada sebarang tahap zum. </h2> <h3> Keburukan </h3> <h4> Kebolehcapaian </h4> <p>Senarai tersusun lebih mudah diakses oleh pembaca skrin dan teknologi bantuan, manakala nombor talian berasaskan SVG mungkin diabaikan atau disalah tafsir.</p> <h4> Kerumitan Penyesuaian </h4> <p>Menggayakan dan berinteraksi dengan nombor baris individu dalam senarai tersusun adalah mudah. Sebaliknya, pendekatan SVG menjadikannya lebih sukar untuk menyesuaikan atau menambah interaktiviti pada nombor talian tertentu.</p> <h4> Keserasian Pelayar </h4> <p>Sifat tersuai SVG dan CSS mungkin tidak dipaparkan secara konsisten merentas semua penyemak imbas — pelaksanaan semasa mempunyai masalah dengan Safari, di mana kita perlu memotong (paddingTop / 10) daripada translateY.</p> <h4> Pengendalian Kandungan Dinamik </h4> <p>Senarai tersusun boleh menjadi lebih fleksibel untuk mengendalikan kemas kini kandungan dinamik, seperti menambah atau mengalih keluar baris, manakala pendekatan SVG mungkin memerlukan penjanaan semula dan penggunaan semula keseluruhan imej latar belakang.</p> <p>Atas ialah kandungan terperinci Nombor Baris untuk <textarea> menggunakan SVG. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">JavaScript</a> <a href="javascript:void(0);">json</a> <a href="javascript:void(0);">css</a> <a href="javascript:void(0);">safari</a> <a href="javascript:void(0);">Array</a> <a href="javascript:void(0);">define</a> <a href="javascript:void(0);">if</a> <a href="javascript:void(0);">for</a> <a href="javascript:void(0);">while</a> <a href="javascript:void(0);">require</a> <a href="javascript:void(0);">break</a> <a href="javascript:void(0);">continue</a> <a href="javascript:void(0);">using</a> <a href="javascript:void(0);">finally</a> <a href="javascript:void(0);">Property</a> <a href="javascript:void(0);">number</a> <a href="javascript:void(0);">dom</a> <a href="javascript:void(0);">this</a> <a href="javascript:void(0);">display</a> <a href="javascript:void(0);">background</a> <a href="javascript:void(0);">li</a> <a href="javascript:void(0);">zoom</a><div class="clear"></div></div><div class="nphpQianSheng"><span>Kenyataan：</span><div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn</div></div></div><div class="nphpSytBox"><span>Artikel sebelumnya：<a class="dBlack" title="Projek Pembangunan Web Pertama Saya: Mempelajari HTML dan CSS" href="https://m.php.cn/ms/faq/1796574374.html">Projek Pembangunan Web Pertama Saya: Mempelajari HTML dan CSS</a></span><span>Artikel seterusnya：<a class="dBlack" title="Projek Pembangunan Web Pertama Saya: Mempelajari HTML dan CSS" href="https://m.php.cn/ms/faq/1796575869.html">Projek Pembangunan Web Pertama Saya: Mempelajari HTML dan CSS</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Artikel berkaitan</h2><em><a href="https://m.php.cn/ms/article.html" class="bBlack"><i>Lihat lagi</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ms/faq/841.html" title="Ringkasan perkara yang perlu anda perhatikan tentang Border semasa menulis CSS" class="aBlack">Ringkasan perkara yang perlu anda perhatikan tentang Border semasa menulis CSS</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/961.html" title="Bagaimana untuk merealisasikan pemilihan berbilang gaya dan penukaran masa nyata gaya_Pertukaran pengalaman" class="aBlack">Bagaimana untuk merealisasikan pemilihan berbilang gaya dan penukaran masa nyata gaya_Pertukaran pengalaman</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/1345.html" title="Analisis penggunaan terperinci marquee" class="aBlack">Analisis penggunaan terperinci marquee</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/269082.html" title="CSS标题线（删除线贯穿线效果）实现" class="aBlack">CSS标题线（删除线贯穿线效果）实现</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/269606.html" title="CSS3中优雅降级和渐进增强的区别" class="aBlack">CSS3中优雅降级和渐进增强的区别</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！</p></div><div class="footermid"><a href="https://m.php.cn/ms/about/us.html">Tentang kita</a><a href="https://m.php.cn/ms/about/disclaimer.html">Penafian</a><a href="https://m.php.cn/ms/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><!-- End Matomo Code --></html>