Rumah  >  Artikel  >  hujung hadapan web  >  Nombor Baris untuk menggunakan SVG</p><!-- <p><a href="http://m.php.cn/ms/article.html" class="cBlack">Artikel teknikal</a>  >  <a href="http://m.php.cn/ms/web-designer.html" class="cBlack">hujung hadapan web</a> > <a href="http://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>464semak 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="http://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="http://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="http://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="http://m.php.cn/ms/faq/1796679988.html" title="Bagaimana untuk Mengekalkan Nisbah Aspek Div ​​dengan CSS untuk Paparan Responsif?" class="aBlack">Bagaimana untuk Mengekalkan Nisbah Aspek Div ​​dengan CSS untuk Paparan Responsif?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/1796679993.html" title="Bagaimana untuk Menyasarkan Kejadian Pertama Kelas Dalam Elemen Induk dalam CSS?" class="aBlack">Bagaimana untuk Menyasarkan Kejadian Pertama Kelas Dalam Elemen Induk dalam CSS?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/1796679966.html" title="Bagaimanakah saya boleh membuat lubang dalam tindanan untuk mendedahkan kandungan di bawahnya menggunakan CSS sahaja?" class="aBlack">Bagaimanakah saya boleh membuat lubang dalam tindanan untuk mendedahkan kandungan di bawahnya menggunakan CSS sahaja?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/1796679972.html" title="Bagaimana untuk Mencapai Teks Dwi Warna Tanpa Menduakan Kandungan?" class="aBlack">Bagaimana untuk Mencapai Teks Dwi Warna Tanpa Menduakan Kandungan?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/1796679978.html" title="Bagaimana untuk Mengubah Senarai Tidak Tertib menjadi Dropdown dengan jQuery?" class="aBlack">Bagaimana untuk Mengubah Senarai Tidak Tertib menjadi Dropdown dengan jQuery?</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><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ms/"><b class="icon1"></b><p>Rumah</p></a></li><li><a href="http://m.php.cn/ms/course.html"><b class="icon2"></b><p>Kursus</p></a></li><li><a href="http://m.php.cn/ms/wenda.html"><b class="icon4"></b><p>Soal Jawab</p></a></li><li><a href="http://m.php.cn/ms/login"><b class="icon5"></b><p>saya</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/ms/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ms/"><b class="icon1"></b><span>Rumah</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/course.html"><b class="icon2"></b><span>Kursus</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/article.html"><b class="icon3"></b><span>Artikel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/wenda.html"><b class="icon4"></b><span>Soal Jawab</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/dic.html"><b class="icon6"></b><span>Kamus</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/course/type/99.html"><b class="icon7"></b><span>Manual</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/xiazai/"><b class="icon8"></b><span>Muat turun</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/faq/zt" title="Topik"><b class="icon12"></b><span>Topik</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/ms/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ms/" >Rumah</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/article.html" class="hover">Artikel</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/wenda.html" >Soal Jawab</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/course.html" >Kursus</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/faq/zt" >Topik</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/xiazai" >Muat turun</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/game" >Permainan</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/dic.html" >Kamus</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><!--顶部导航 end--><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></html>