Heim  >  Artikel  >  Web-Frontend  >  Zeilennummern für mit SVG</p><!-- <p><a href="http://m.php.cn/de/article.html" class="cBlack">Technische Artikel</a>  >  <a href="http://m.php.cn/web-designer.html" class="cBlack">Web-Frontend</a> > <a href="http://m.php.cn/de/css-tutorial.html" class="cBlack">CSS-Tutorial</a> > Zeilennummern für <textarea> mit SVG</p> --><div class="clear"></div></div></div><div class="nphpQianBox"><div class="nphpQianTitle"><h1>Zeilennummern für <textarea> mit 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'>Original</i><div class="clear"></div></dt><dd><em>2024-08-19 18:33:32</em><i>344Durchsuche</i><div class="clear"></div></dd></dl><div class="clear"></div></div></div><div class="nphpQianCont wenda-list"><p>Neulich habe ich an einem JSON-Schemagenerator gearbeitet und wollte Zeilennummern in einem <textarea> anzeigen. Nichts Ausgefallenes und keine Rücksicht auf weiche Zeilenumbrüche oder irgendetwas entfernt Kompliziertes.</p> <p>Ich habe einige Nachforschungen angestellt und mehrere Ansätze gefunden:</p> <ol> <li>Verwendung eines Hintergrundbilds (TinyMCE macht das, indem es ein PNG verwendet)</li> <li>Mit einem <ol> geordnete Liste. </li> </ol> <p>Keiner davon hat mir gefallen! Das erste sah nicht klar aus – und entsprach nicht den Stilen, die ich bereits für meine <textarea>-Elemente eingerichtet hatte.</p> <p>Der zweite Schritt erforderte eine Menge JavaScript, um diese geordnete Liste aufrechtzuerhalten: <li>-Elemente dynamisch hinzufügen/entfernen, Scroll-Ereignisse synchronisieren und vieles mehr.</p> <p>Also habe ich am Ende einen Hybrid geschaffen. </p> <p>Es handelt sich um eine dynamisch generierte SVG-Datei, die als <em>benutzerdefinierte CSS-Eigenschaft</em> gespeichert und als Hintergrundbild verwendet wird, wobei die Stile vom übergeordneten <textarea>-Element übernommen werden.</p> <p><img src="https://img.php.cn/upload/article/000/000/000/172406361393154.png" alt="Line Numbers for <textarea>unter Verwendung von SVG"></p> <p>Lass uns eintauchen.</p> <hr> <h2> JavaScript </h2> <p>Zuerst die Hauptmethode:<br> </p> <pre class="brush:php;toolbar:false">lineNumbers(element, numLines = 50, inline = false) </pre> <p>Element ist das <textarea> Zu verwendendes Element, numLines gibt die Anzahl der zu rendernden Zeilen an und inline gibt an, ob das generierte Bild auf element (true) oder auf document.body (false) gespeichert werden soll.</p> <p>Als nächstes definieren wir ein Präfix für die benutzerdefinierte Eigenschaft:<br> </p> <pre class="brush:php;toolbar:false">const prefix = '--linenum-'; </pre> <p>Bevor wir fortfahren, prüfen wir, ob vorhandene Immobilien weiterverwendet werden sollen:<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>Als nächstes <strong>extrahieren</strong> wir Stile aus dem Element und rendern das SVG mit derselben Schriftfamilie, Schriftgröße, Zeilenhöhe usw. :<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>Wir benötigen auch eine zufällige ID für unser Eigentum:<br> </p> <pre class="brush:php;toolbar:false">const id = `${prefix}${Math.random().toString(36).substr(2, 6)}`; </pre> <p>Und jetzt ist es an der Zeit, das SVG zu rendern:<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>Lassen Sie es uns aufschlüsseln:</strong></p> <p>Im <style>-Bereich legen wir einfach die Stile fest, die wir aus dem <textarea>-Bereich extrahiert haben. früher. Anstatt die Attribute y und dy für die <text>-Elemente zu verwenden, verwenden wir einfach eine --n-Eigenschaft, um die Textelemente mithilfe von CSS zu übersetzen.</p> <p>Der letzte Teil iteriert ein aus numLines erstelltes Array und hängt die <text>-Elemente an die Haupt-SVG an.</p> <p>Wir haben es fast geschafft!</p> <hr> <p>Um das generierte SVG als URL()-Eigenschaft zu verwenden, müssen wir es <strong>kodieren</strong>:<br> </p> <pre class="brush:php;toolbar:false">const encodedURI = `url("data:image/svg+xml,${encodeURIComponent(svg)}")`; </pre> <p>Und schließlich legen wir diese Eigenschaft entweder auf element oder document-body fest:<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>Und das ist es!</strong></p> <p>Nicht schlecht und nur 610 Bytes, minimiert und komprimiert!</p> <hr> <h2> Demo </h2> <p>Sie können sich hier eine Demo ansehen und das vollständige Skript hier herunterladen.</p> <p>Unten ist ein vereinfachter Codepen, der nicht die Inline-Eigenschaftslogik verwendet:</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> Für und Wider </h2> <p>Gibt es Vor- und Nachteile? Natürlich gibt es sie! </p> <p>Ich persönlich – für mein aktuelles Projekt – brauchte eine einfache, klare Möglichkeit, Zeilennummern zu einer JSON-Vorschau innerhalb eines <textarea> hinzuzufügen, und diese Methode ist genau das Richtige.</p> <h3> Vorteile </h3> <h4> Reduzierte DOM-Manipulation </h4> <p>Diese Methode basiert nicht auf der Manipulation des DOM. Die Zeilennummern werden als einzelnes SVG generiert und in einer benutzerdefinierten CSS-Eigenschaft gespeichert.</p> <h4> Automatische Synchronisierung </h4> <p>Da die Zeilennummern Teil des Hintergrundbilds sind, scrollen sie automatisch mit dem Textinhalt, sodass keine manuelle Synchronisierungslogik erforderlich ist.</p> <h4> Wiederverwendbarkeit über Elemente hinweg </h4> <p>Durch die Speicherung der generierten SVG-Datei in einer benutzerdefinierten CSS-Eigenschaft kann sie über mehrere Elemente hinweg wiederverwendet werden. Das bedeutet, dass, wenn mehrere Elemente dieselben Zeilennummern erfordern, alle auf dieselbe benutzerdefinierte Eigenschaft verweisen können, wodurch eine redundante SVG-Generierung vermieden wird.</p> <h4> Skalierbarkeit </h4> <h2> Der Vektorcharakter von SVG stellt sicher, dass die Zeilennummern bei jeder Zoomstufe klar und deutlich bleiben. </h2> <h3> Nachteile </h3> <h4> Zugänglichkeit </h4> <p>Geordnete Listen sind für Screenreader und unterstützende Technologien besser zugänglich, während SVG-basierte Zeilennummern möglicherweise ignoriert oder falsch interpretiert werden.</p> <h4> Komplexität der Anpassung </h4> <p>Die Gestaltung und Interaktion mit einzelnen Zeilennummern in einer geordneten Liste ist unkompliziert. Im Gegensatz dazu macht es der SVG-Ansatz schwieriger, bestimmte Zeilennummern anzupassen oder ihnen Interaktivität hinzuzufügen.</p> <h4> Browserkompatibilität </h4> <p>Benutzerdefinierte SVG- und CSS-Eigenschaften werden möglicherweise nicht in allen Browsern konsistent dargestellt – die aktuelle Implementierung hat Probleme mit Safari, wo wir (paddingTop / 10) von translatorY abziehen müssen.</p> <h4> Dynamische Inhaltsverarbeitung </h4> <p>Geordnete Listen können flexibler für die Handhabung dynamischer Inhaltsaktualisierungen sein, z. B. das Hinzufügen oder Entfernen von Zeilen, während der SVG-Ansatz möglicherweise die Neugenerierung und erneute Anwendung des gesamten Hintergrundbilds erfordert.</p> <p>Das obige ist der detaillierte Inhalt vonZeilennummern für <textarea> mit SVG. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</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>Stellungnahme：</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel：<a class="dBlack" title="Mein erstes Webentwicklungsprojekt: HTML und CSS lernen" href="http://m.php.cn/de/faq/1796574374.html">Mein erstes Webentwicklungsprojekt: HTML und CSS lernen</a></span><span>Nächster Artikel：<a class="dBlack" title="Mein erstes Webentwicklungsprojekt: HTML und CSS lernen" href="http://m.php.cn/de/faq/1796575869.html">Mein erstes Webentwicklungsprojekt: HTML und CSS lernen</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="http://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/de/faq/347776.html" title="Zusammenfassung von sechs Implementierungsmethoden des JSDOMReady-Ereignisses" class="aBlack">Zusammenfassung von sechs Implementierungsmethoden des JSDOMReady-Ereignisses</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348838.html" title="Beispiele für die CSS-Implementierung verschiedener Spaltenlayouts auf der Seite" class="aBlack">Beispiele für die CSS-Implementierung verschiedener Spaltenlayouts auf der Seite</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/349106.html" title="Reine CSS3-Vollbild-Diashow-Effekte" class="aBlack">Reine CSS3-Vollbild-Diashow-Effekte</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/349108.html" title="Reiner CSS3-Stil mit coolen, farbenfrohen 3D-Schaltflächen" class="aBlack">Reiner CSS3-Stil mit coolen, farbenfrohen 3D-Schaltflächen</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/349109.html" title="Atemberaubende sechseckige CSS3-Menüanimationseffekte" class="aBlack">Atemberaubende sechseckige CSS3-Menüanimationseffekte</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/de/"><b class="icon1"></b><p>Heim</p></a></li><li><a href="http://m.php.cn/de/course.html"><b class="icon2"></b><p>Kurs</p></a></li><li><a href="http://m.php.cn/de/wenda.html"><b class="icon4"></b><p>Fragen und Antworten</p></a></li><li><a href="http://m.php.cn/de/login"><b class="icon5"></b><p>Mein</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/de/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/de/"><b class="icon1"></b><span>Heim</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/course.html"><b class="icon2"></b><span>Kurs</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/article.html"><b class="icon3"></b><span>Artikel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/wenda.html"><b class="icon4"></b><span>Fragen und Antworten</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/dic.html"><b class="icon6"></b><span>Wörterbuch</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/course/type/99.html"><b class="icon7"></b><span>Handbuch</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/xiazai/"><b class="icon8"></b><span>Herunterladen</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/faq/zt" title="Thema"><b class="icon12"></b><span>Thema</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/de/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/de/" >Heim</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/article.html" class="hover">Artikel</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/wenda.html" >Fragen und Antworten</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/course.html" >Kurs</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/faq/zt" >Thema</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/xiazai" >Herunterladen</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/game" >Spiel</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/dic.html" >Wörterbuch</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:setlang('ms');" class="language course-right-orders chooselan " 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:;" class="language course-right-orders chooselan chooselanguage" 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>