Code Monkey home page Code Monkey logo

consider implementing <title> about svg.js HOT 3 CLOSED

ctzurcanu avatar ctzurcanu commented on May 18, 2024
consider implementing <p>from svg.js.</p></section> </section> </article> <article> <h2 class="h2">Comments (3)</h2> <section class="issue-comment"> <section id="21171844" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/1025530?s=30&u=b9e30bcad9aa8639bc42ed96c92ad98762c8b4ca&v=4" alt="ctzurcanu avatar" /> <a class="issue-username" href="/ctzurcanu">ctzurcanu</a> <span class="issue-time"> commented on May 18, 2024 </span> </section> <section class="markdown markdown-js p-5"><p dir="auto">this is source from svg-edit for exemplification:</p> <div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <g> <title>Layer 1</title> </g> </svg>"><pre class="notranslate"><code class="notranslate"><svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <g> <title>Layer 1</title> </g> </svg> </code></pre></div><p>from svg.js.</p></section> </section> <section class="issue-comment"> <section id="21173452" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/107324?s=30&u=66b7ed995a280d3247d59c1560809cc59540f14d&v=4" alt="wout avatar" /> <a class="issue-username" href="/wout">wout</a> <span class="issue-time"> commented on May 18, 2024 </span> </section> <section class="markdown markdown-js p-5"><p dir="auto">I will have to look into that because it it would require some remodelling on the arrange module. Invisible items are a problem there. This can easily be achieved with a plugin though:</p> <p dir="auto"><a href="http://jsfiddle.net/wout/B87ET/" rel="nofollow">http://jsfiddle.net/wout/B87ET/</a></p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// title plugin SVG.Title = function() { this.constructor.call(this, SVG.create('title')) } SVG.Title.prototype = new SVG.Element SVG.extend(SVG.Title, { text: function(text) { while (this.node.firstChild) this.node.removeChild(this.node.firstChild) this.node.appendChild(document.createTextNode(text)) return this } }) SVG.extend(SVG.Container, { title: function(text){ return this.put(new SVG.Title).text(text) } }) // example usage var draw = SVG('canvas') var group = draw.group() group.title('This is a pink square.') group.rect(100,100).fill('#f06')"><pre class="notranslate"><span class="pl-c">// title plugin</span> <span class="pl-c1">SVG</span><span class="pl-kos">.</span><span class="pl-en">Title</span> <span class="pl-c1">=</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">constructor</span><span class="pl-kos">.</span><span class="pl-en">call</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">,</span> <span class="pl-c1">SVG</span><span class="pl-kos">.</span><span class="pl-en">create</span><span class="pl-kos">(</span><span class="pl-s">'title'</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">}</span> <span class="pl-c1">SVG</span><span class="pl-kos">.</span><span class="pl-c1">Title</span><span class="pl-kos">.</span><span class="pl-c1">prototype</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">SVG</span><span class="pl-kos">.</span><span class="pl-c1">Element</span> <span class="pl-c1">SVG</span><span class="pl-kos">.</span><span class="pl-en">extend</span><span class="pl-kos">(</span><span class="pl-c1">SVG</span><span class="pl-kos">.</span><span class="pl-c1">Title</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-en">text</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">text</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">while</span> <span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">node</span><span class="pl-kos">.</span><span class="pl-c1">firstChild</span><span class="pl-kos">)</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">node</span><span class="pl-kos">.</span><span class="pl-en">removeChild</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">node</span><span class="pl-kos">.</span><span class="pl-c1">firstChild</span><span class="pl-kos">)</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">node</span><span class="pl-kos">.</span><span class="pl-en">appendChild</span><span class="pl-kos">(</span><span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">createTextNode</span><span class="pl-kos">(</span><span class="pl-s1">text</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-k">return</span> <span class="pl-smi">this</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">SVG</span><span class="pl-kos">.</span><span class="pl-en">extend</span><span class="pl-kos">(</span><span class="pl-c1">SVG</span><span class="pl-kos">.</span><span class="pl-c1">Container</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-en">title</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">text</span><span class="pl-kos">)</span><span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">put</span><span class="pl-kos">(</span><span class="pl-k">new</span> <span class="pl-c1">SVG</span><span class="pl-kos">.</span><span class="pl-c1">Title</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">text</span><span class="pl-kos">(</span><span class="pl-s1">text</span><span class="pl-kos">)</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c">// example usage</span> <span class="pl-k">var</span> <span class="pl-s1">draw</span> <span class="pl-c1">=</span> <span class="pl-c1">SVG</span><span class="pl-kos">(</span><span class="pl-s">'canvas'</span><span class="pl-kos">)</span> <span class="pl-k">var</span> <span class="pl-s1">group</span> <span class="pl-c1">=</span> <span class="pl-s1">draw</span><span class="pl-kos">.</span><span class="pl-en">group</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-s1">group</span><span class="pl-kos">.</span><span class="pl-en">title</span><span class="pl-kos">(</span><span class="pl-s">'This is a pink square.'</span><span class="pl-kos">)</span> <span class="pl-s1">group</span><span class="pl-kos">.</span><span class="pl-en">rect</span><span class="pl-kos">(</span><span class="pl-c1">100</span><span class="pl-kos">,</span><span class="pl-c1">100</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">fill</span><span class="pl-kos">(</span><span class="pl-s">'#f06'</span><span class="pl-kos">)</span></pre></div><p>from svg.js.</p></section> </section> <section class="issue-comment"> <section id="21174362" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/1025530?s=30&u=b9e30bcad9aa8639bc42ed96c92ad98762c8b4ca&v=4" alt="ctzurcanu avatar" /> <a class="issue-username" href="/ctzurcanu">ctzurcanu</a> <span class="issue-time"> commented on May 18, 2024 </span> </section> <section class="markdown markdown-js p-5"><p dir="auto">very good to have something to work with today. thank you.</p><p>from svg.js.</p></section> </section> </article> <section> <h2 class="h2">Related Issues (20)</h2> <div class="issue"> <ul> <li> <a href="/svgdotjs/svg.js/issues/1293">Update website on node package README</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span> </li> <li> <a href="/svgdotjs/svg.js/issues/1295">It would be nice if we can destroy timeline gracefully.</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 2</span> </li> <li> <a href="/svgdotjs/svg.js/issues/1296">Error: Unbound namespace prefix: "svgjs"</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 8</span> </li> <li> <a href="/svgdotjs/svg.js/issues/1298">How to judge the <g> container exist the child element <rect>?</a> </li> <li> <a href="/svgdotjs/svg.js/issues/1299">npm install for nodejs</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span> </li> <li> <a href="/svgdotjs/svg.js/issues/1301">how to move while rotating</a> </li> <li> <a href="/svgdotjs/svg.js/issues/1302">Text alignment differs between 3.0 and 3.1</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span> </li> <li> <a href="/svgdotjs/svg.js/issues/1303">(documentation) animating shapes along a path example needs rewrite </a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 5</span> </li> <li> <a href="/svgdotjs/svg.js/issues/1304">Moving a text with an inside title element fails</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 3</span> </li> <li> <a href="/svgdotjs/svg.js/issues/1305">Migrating SVG window events</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 6</span> </li> <li> <a href="/svgdotjs/svg.js/issues/1306">Incomplete typings - measurements should accept percentages</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 3</span> </li> <li> <a href="/svgdotjs/svg.js/issues/1307">No Fragment declaration in svg.js.d.ts</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 2</span> </li> <li> <a href="/svgdotjs/svg.js/issues/1308">Custom Bezier Function</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 2</span> </li> <li> <a href="/svgdotjs/svg.js/issues/1310">Negative scale value in animation do not work properly.</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 4</span> </li> <li> <a href="/svgdotjs/svg.js/issues/1311">TypeError: Cannot read properties of undefined (reading 'call') for PATHs in NodeJS</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 8</span> </li> <li> <a href="/svgdotjs/svg.js/issues/1312">svgjs.com redirect to 'gacor.poker' scammy site</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span> </li> <li> <a href="/svgdotjs/svg.js/issues/1313">Image SVG size is zero sometimes</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 4</span> </li> <li> <a href="/svgdotjs/svg.js/issues/1314">How can I draw a Polyline from a svg => g => svg => rect (responsive) to an Dom Element on the right side?</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span> </li> <li> <a href="/svgdotjs/svg.js/issues/1315">Testing overloaded methods is hard</a> </li> <li> <a href="/svgdotjs/svg.js/issues/1316">Issues with rolling a timeline backwards with non-animating functions</a> </li> </ul> </div> </section> </main> <section id="more" class="flex-none w-full md:w-60 text-gray-600 bg-gray-50 px-5 md:px-3 rounded-md dark-color"> <div class="w-full md:w-60 h-0.5"></div> <section> <!-- recommend projects --> <h2 class="h2 py-3.5">Recommend Projects</h2> <ul> <li class="mb-4"> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/facebook/react"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://raw.githubusercontent.com/facebook/create-react-app/master/packages/cra-template/template/public/logo192.png" alt="React photo" /> React </a> </h3> <p class="article-more pt-1">A declarative, efficient, and flexible JavaScript library for building user interfaces.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/vuejs/vue"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://camo.githubusercontent.com/c8f91d18976e27123643a926a2588b8d931a0292fd0b6532c3155379e8591629/68747470733a2f2f7675656a732e6f72672f696d616765732f6c6f676f2e706e67" alt="Vue.js photo" /> Vue.js </a> </h3> <p class="article-more pt-1">🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/microsoft/TypeScript"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://www.typescriptlang.org/favicon-32x32.png" alt="Typescript photo" /> Typescript </a> </h3> <p class="article-more pt-1">TypeScript is a superset of JavaScript that compiles to clean JavaScript output.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/tensorflow/tensorflow"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://camo.githubusercontent.com/c04e16c05de80dadbdc990884672fc941fdcbbfbb02b31dd48c248d010861426/68747470733a2f2f7777772e74656e736f72666c6f772e6f72672f696d616765732f74665f6c6f676f5f736f6369616c2e706e67" alt="TensorFlow photo" /> TensorFlow </a> </h3> <p class="article-more pt-1">An Open Source Machine Learning Framework for Everyone</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/django/django"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars2.githubusercontent.com/u/27804?s=200&v=4" alt="Django photo" /> Django </a> </h3> <p class="article-more pt-1">The Web framework for perfectionists with deadlines.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/laravel/laravel"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://laravel.com/img/logomark.min.svg" alt="Laravel photo" /> Laravel </a> </h3> <p class="article-more pt-1">A PHP framework for web artisans</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/d3/d3"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://camo.githubusercontent.com/586ccf0aad9684edc821658cee04146cf36d1f1d5ec904bbefd72728909ccb2e/68747470733a2f2f64336a732e6f72672f6c6f676f2e737667" alt="D3 photo" /> D3 </a> </h3> <p class="article-more pt-1">Bring data to life with SVG, Canvas and HTML. 📊📈🎉</p> </article> </li> <li> <div> </div> </li> </ul> </section> <section> <!-- recommend topics --> <h2 class="h2 py-3.5">Recommend Topics</h2> <ul> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/topic/javascript"> javascript </a> </h3> <p class="article-more pt-1">JavaScript (JS) is a lightweight interpreted programming language with first-class functions.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/topic/web"> web </a> </h3> <p class="article-more pt-1">Some thing interesting about web. New door for the world.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/topic/server"> server </a> </h3> <p class="article-more pt-1">A server is a program made to process requests and deliver data to clients.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/topic/machine-learning"> Machine learning </a> </h3> <p class="article-more pt-1">Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/topic/visualization"> Visualization </a> </h3> <p class="article-more pt-1">Some thing interesting about visualization, use data art</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/topic/game"> Game </a> </h3> <p class="article-more pt-1">Some thing interesting about game, make everyone happy.</p> </article> </li> <li> </li> </ul> </section> <section> <!-- recommend users --> <h2 class="h2 py-3.5">Recommend Org</h2> <ul> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/facebook"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars.githubusercontent.com/u/69631?v=4" alt="Facebook photo" /> Facebook </a> </h3> <p class="article-more pt-1">We are working to build community through open source technology. NB: members must have two-factor auth.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/microsoft"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars.githubusercontent.com/u/6154722?v=4" alt="Microsoft photo" /> Microsoft </a> </h3> <p class="article-more pt-1">Open source projects and samples from Microsoft.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/google"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars.githubusercontent.com/u/1342004?v=4" alt="Google photo" /> Google </a> </h3> <p class="article-more pt-1">Google ❤️ Open Source for everyone.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/alibaba"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars.githubusercontent.com/u/1961952?v=4" alt="Alibaba photo" /> Alibaba </a> </h3> <p class="article-more pt-1">Alibaba Open Source for everyone</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/d3"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars.githubusercontent.com/u/1562726?v=4" alt="D3 photo" /> D3 </a> </h3> <p class="article-more pt-1">Data-Driven Documents codes.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/tencent"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars.githubusercontent.com/u/18461506?v=4" alt="Tencent photo" /> Tencent </a> </h3> <p class="article-more pt-1">China tencent open source team.</p> </article> </li> <li> </li> </ul> </section> </section> </div> </div> <!-- footer --> <footer class="sizeing text-xs text-center p-5"> <div>Friends: <a class="hover:underline" target="_blank" href="https://www.chanpinqingbaoju.com">ProductDiscover</a> </div> Copyright © 2024 Code Monkey <!-- & <span class="block md:inline">Data Power by github.com</span> --> ❤️ <a class="hover:underline block md:inline" href="mailto:cs.victor.edison@gmail.com">Mail to me</a> </footer> </body> </html>