SVG.js

### Install Dependencies (npm) Source: https://github.com/svgdotjs/svgdotjs.github.io/blob/source-3.2/README.md Installs the necessary project dependencies using npm. This command should be run first to set up the project environment. ```bash npm install ``` -------------------------------- ### Including SVG.js Script in HTML Source: https://github.com/svgdotjs/svgdotjs.github.io/blob/source-3.2/content/3-getting-started/default.txt Provides the basic HTML structure required to use SVG.js by including the library script from a CDN in the section of the document. ```html SVG.js ``` -------------------------------- ### Creating and Adding SVG Document in JavaScript Source: https://github.com/svgdotjs/svgdotjs.github.io/blob/source-3.2/content/3-getting-started/default.txt Demonstrates how to initialize a new SVG document using SVG(), add it to a target element (like body), set its size, and draw a basic shape like a rectangle. ```javascript var draw = SVG().addTo('body').size(300, 300) var rect = draw.rect(100, 100).attr({ fill: '#f06' }) ``` -------------------------------- ### Sizing SVG Document with Percentages in JavaScript Source: https://github.com/svgdotjs/svgdotjs.github.io/blob/source-3.2/content/3-getting-started/default.txt Shows how to create an SVG document and set its dimensions using percentage values relative to its parent container, targeting an element by its ID. ```javascript var draw = SVG().addTo('#someId').size('100%', '100%') ``` -------------------------------- ### Importing SVG.js Module in JavaScript Source: https://github.com/svgdotjs/svgdotjs.github.io/blob/source-3.2/content/3-getting-started/default.txt Shows how to import the necessary SVG object when using SVG.js in a modern JavaScript module environment. ```javascript import { SVG } from '@svgdotjs/svg.js' ``` -------------------------------- ### Waiting for DOMContentLoaded in JavaScript Source: https://github.com/svgdotjs/svgdotjs.github.io/blob/source-3.2/content/3-getting-started/default.txt Illustrates how to use SVG.on to ensure that SVG.js code that interacts with the DOM runs only after the entire HTML document has been fully loaded and parsed. ```javascript SVG.on(document, 'DOMContentLoaded', function() { var draw = SVG().addTo('body') }) ``` -------------------------------- ### Using SVG.js in Pure SVG Document Source: https://github.com/svgdotjs/svgdotjs.github.io/blob/source-3.2/content/3-getting-started/default.txt Provides an example of embedding SVG.js and its usage directly within a standalone XML/SVG file, demonstrating how to select an element and perform actions using embedded JavaScript within a CDATA section. ```xml ``` -------------------------------- ### Demonstrating SVG() Function Uses in JavaScript Source: https://github.com/svgdotjs/svgdotjs.github.io/blob/source-3.2/content/3-getting-started/default.txt Explains the versatility of the core SVG() function, showing how it can be used to create new documents, retrieve existing SVG.js elements from the DOM using various selectors, create elements from SVG fragments, or convert DOM nodes into SVG.js objects. ```javascript // new document var draw = SVG() // get rect from dom var rect = SVG('#myRectId') // or var rect = SVG('rect') // any css selector will do var path = SVG('#group1 path.myClass') // create new object from fragment var circle = SVG('') // convert node to svg.js object var obj = SVG(node) ``` -------------------------------- ### Install Node.js Dependencies Source: https://github.com/svgdotjs/svgdotjs.github.io/blob/source-3.2/content/15-contributing/2-documentation/default.txt This command installs all required Node.js packages listed in the project's package.json file. It is typically only necessary to run this command once after cloning the repository. ```Shell npm install ``` -------------------------------- ### Install Dependencies (npm) Source: https://github.com/svgdotjs/svgdotjs.github.io/blob/source-3.2/content/15-contributing/default.txt Installs the project's dependencies using npm. This is required before building or testing the library. ```sh $ npm install ``` -------------------------------- ### Run Test Suite (npm) Source: https://github.com/svgdotjs/svgdotjs.github.io/blob/source-3.2/content/15-contributing/default.txt Executes the project's test suite from the command line. Requires Firefox to be installed. ```sh $ npm test ``` -------------------------------- ### Install SVG.js using Npm Source: https://github.com/svgdotjs/svgdotjs.github.io/blob/source-3.2/content/2-installation/default.txt Install the SVG.js library using the npm package manager. This command downloads and installs the package into the project's node_modules directory. ```sh npm install @svgdotjs/svg.js ``` -------------------------------- ### Install SVG.js using Yarn Source: https://github.com/svgdotjs/svgdotjs.github.io/blob/source-3.2/content/2-installation/default.txt Install the SVG.js library using the Yarn package manager. This command adds the package as a dependency to the project. ```sh yarn add @svgdotjs/svg.js ``` -------------------------------- ### Creating an Email Input Field in HTML Source: https://github.com/svgdotjs/svgdotjs.github.io/blob/source-3.2/kirby/test/etc/kirbytext/input-with-placeholder/test.txt This snippet shows how to create a standard HTML input field specifically for capturing email addresses. It uses the 'text' type and includes a placeholder attribute to guide the user. ```HTML ``` -------------------------------- ### Printing 'Hello World' in PHP Source: https://github.com/svgdotjs/svgdotjs.github.io/blob/source-3.2/kirby/vendor/erusev/parsedown/test/data/code_block.md This snippet initializes a string variable and prints its value to the standard output using the `echo` statement in PHP. ```php returns rect draw.get(1) //-> returns circle ``` -------------------------------- ### Using a Custom SVG Element (JavaScript) Source: https://github.com/svgdotjs/svgdotjs.github.io/blob/source-3.2/content/12-extending/default.txt Provides a simple example of how to create an instance of the custom `SVG.Rounded` element using the factory method (`rounded`) added to the drawing container. ```javascript var rounded = draw.rounded(200, 100) ``` -------------------------------- ### Good Style: Variable Declaration at Start (JavaScript) Source: https://github.com/svgdotjs/svgdotjs.github.io/blob/source-3.2/content/15-contributing/1-coding-style/default.txt Shows the preferred method for declaring multiple local variables at the beginning of a function or method, separating declaration from assignment. ```javascript function reading_board() { var aap, noot, mies aap = 1 noot = 2 mies = aap + noot } ``` -------------------------------- ### Animation with Duration, Delay, When - SVG.js Source: https://github.com/svgdotjs/svgdotjs.github.io/blob/source-3.2/content/8-animating/default.txt Illustrates passing duration, delay, and `when` parameters to the `animate()` method to control timing and start point, followed by animating attributes. ```javascript rect.animate(2000, 1000, 'now').attr({ fill: '#f03' }) ``` -------------------------------- ### Bad Style: Compressed Code (JavaScript) Source: https://github.com/svgdotjs/svgdotjs.github.io/blob/source-3.2/content/15-contributing/1-coding-style/default.txt Example of coding style to avoid, showing overly compressed code without sufficient spacing or newlines, which reduces readability. ```javascript var nest=draw.nested().attr({x:10,y:20,width:200,height:300}); for(var i=0;i<5;i++)nest.circle(100); ``` -------------------------------- ### Getting the First Child using SVG.js Source: https://github.com/svgdotjs/svgdotjs.github.io/blob/source-3.2/content/6-referencing-creating-elements/default.txt This snippet shows how to use the first() method on a parent element (like a drawing or group) to retrieve its first direct child element as an SVG.js instance. ```javascript draw.first() ``` -------------------------------- ### Echoing a Variable in PHP Source: https://github.com/svgdotjs/svgdotjs.github.io/blob/source-3.2/kirby/vendor/erusev/parsedown/test/data/fenced_code_block.md This snippet declares a string variable and then prints its value to the output using the echo statement. It demonstrates a basic variable assignment and output operation in PHP. ```php ``` -------------------------------- ### Getting Bounding Box of PointArray (JavaScript) Source: https://github.com/svgdotjs/svgdotjs.github.io/blob/source-3.2/content/10-classes/default.txt Demonstrates how to calculate the bounding box of the points contained within an SVG.PointArray instance using the `bbox()` method. ```javascript array.bbox() ``` -------------------------------- ### Applying Easing to SVG.js Runner (JavaScript) Source: https://github.com/svgdotjs/svgdotjs.github.io/blob/source-3.2/content/8-animating/default.txt Demonstrates how to set the easing function for an animation runner using the `ease()` method. It shows examples using a predefined string alias and passing a custom easing function created by `SVG.easing.beziere` or `SVG.easing.step`. ```JavaScript var runner = new SVG.Runner({duration: 1000}) // use a string runner.ease('<>') // or pass a function runner.ease(SVG.easing.beziere(x1, y1, x2, y2)) runner.ease(SVG.easing.step(5, 'jump-end')) ``` -------------------------------- ### Getting Bounding Box of PathArray (JavaScript) Source: https://github.com/svgdotjs/svgdotjs.github.io/blob/source-3.2/content/10-classes/default.txt Demonstrates how to calculate the bounding box of the geometry defined by an SVG.PathArray instance using the `bbox()` method. ```javascript array.bbox() ``` -------------------------------- ### Getting Hex Value of SVG.Color (JavaScript) Source: https://github.com/svgdotjs/svgdotjs.github.io/blob/source-3.2/content/10-classes/default.txt Shows how to retrieve the hexadecimal string representation of an SVG.Color instance using the `toHex()` method. ```javascript color.toHex() //-> returns '#ff0066' ``` -------------------------------- ### Styling Paragraphs with CSS Source: https://github.com/svgdotjs/svgdotjs.github.io/blob/source-3.2/kirby/vendor/erusev/parsedown/test/data/block-level_html.md This CSS rule targets all paragraph elements (`p`) and sets their text color to the hexadecimal value #789. ```css p {color: #789;} ``` -------------------------------- ### Getting RGB String of SVG.Color (JavaScript) Source: https://github.com/svgdotjs/svgdotjs.github.io/blob/source-3.2/content/10-classes/default.txt Shows how to retrieve the CSS RGB string representation of an SVG.Color instance using the `toRgb()` method. ```javascript color.toRgb() //-> returns 'rgb(255,0,102)' ``` -------------------------------- ### Getting Pattern URL in SVG.js Source: https://github.com/svgdotjs/svgdotjs.github.io/blob/source-3.2/content/5-shape-elements/default.txt Illustrates how to retrieve the URL reference string for a created pattern element, which can be used in CSS or other contexts. ```javascript pattern.url() //-> returns 'url(#SvgjsPattern1234)' ``` -------------------------------- ### Getting the Root SVG Element using SVG.js Source: https://github.com/svgdotjs/svgdotjs.github.io/blob/source-3.2/content/6-referencing-creating-elements/default.txt This snippet demonstrates the root() method, which can be called on any SVG.js element instance to traverse up the parent chain and return the top-level SVG.Svg drawing element. ```javascript var draw = SVG().addTo('#drawing') var rect = draw.rect(100, 100) rect.root() //-> returns draw ``` -------------------------------- ### Getting PathArray from SVG Element (JavaScript) Source: https://github.com/svgdotjs/svgdotjs.github.io/blob/source-3.2/content/10-classes/default.txt Shows how to retrieve the underlying SVG.PathArray instance from an SVG path element using the `array()` method. ```javascript path.array() //-> returns the SVG.PathArray instance ``` -------------------------------- ### Bad Style: Multi-Line Comments, Cryptic Names (JavaScript) Source: https://github.com/svgdotjs/svgdotjs.github.io/blob/source-3.2/content/15-contributing/1-coding-style/default.txt Example of commenting style to avoid, using multi-line block comments and cryptic method names, which is less preferred than concise single-line comments and readable names. ```javascript /* * * does something with orange and opacity * */ SVG.extend(SVG.Rect, { orgf: function() { return this.fill('orange').opacity(0.85) } }) ``` -------------------------------- ### Getting Memory Data with SVG.js remember() in JavaScript Source: https://github.com/svgdotjs/svgdotjs.github.io/blob/source-3.2/content/7-manipulating/default.txt Retrieves data stored temporarily in memory on an SVG element using a specified key. ```javascript rect.remember('oldBBox') ``` -------------------------------- ### Calling parents() to get ancestors (JavaScript) Source: https://github.com/svgdotjs/svgdotjs.github.io/blob/source-3.2/content/6-referencing-creating-elements/default.txt Retrieves all ancestor elements of the current element up to a specified matcher or the root SVG element, returning an SVG.List. If no matcher is provided, it returns all ancestors up to the root. ```javascript var group1 = draw.group().addClass('test') , group2 = group1.group() , rect = group2.rect(100,100) rect.parents() // returns [group2, group1, draw] rect.parents('.test') // returns [group2, group1] rect.parents(group2) // returns [group2] rect.parents(group1) // returns [group2, group1] ``` -------------------------------- ### Initializing and Parsing Markdown with Parsedown in PHP Source: https://github.com/svgdotjs/svgdotjs.github.io/blob/source-3.2/kirby/vendor/erusev/parsedown/README.md This snippet demonstrates how to initialize the Parsedown class and use its `text` method to convert a Markdown string into HTML. It shows a basic example of parsing italic text. ```php $Parsedown = new Parsedown(); echo $Parsedown->text('Hello _Parsedown_!'); # prints:

Hello Parsedown!