{"id":9317,"date":"2022-10-06T04:47:01","date_gmt":"2022-10-06T04:47:01","guid":{"rendered":"https:\/\/mdr.foobrdigital.com\/?p=9317"},"modified":"2022-10-06T04:47:01","modified_gmt":"2022-10-06T04:47:01","slug":"svg-linear","status":"publish","type":"post","link":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/2022\/10\/06\/svg-linear\/","title":{"rendered":"SVG Linear"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"description-of-svg-gradients-1\">Description of SVG gradients<\/h2>\n\n\n\n<p>A gradient is a fluid transition from one color to another. It is possible to apply multiple color transitions to the same element.<\/p>\n\n\n\n<p>There exist two main kinds of gradients in SVG:<\/p>\n\n\n\n<ul><li>linear<\/li><li>radial<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"the-lt-lineargradient-gt-element-3\">The &lt;linearGradient&gt; element<\/h2>\n\n\n\n<p>The &lt;linearGradient&gt;&gt; element specifies linear gradients that fill graphical elements. It should be nested inside of a &lt;defs&gt; tag that contains definition of particular elements, like gradients.<\/p>\n\n\n\n<p>Linear gradients can be horizontal, vertical, or angular:<\/p>\n\n\n\n<ul><li>Horizontal gradients &#8211;&nbsp;y1&nbsp;and&nbsp;y2&nbsp;are equal, and&nbsp;x1&nbsp;and&nbsp;x2&nbsp;differ.<\/li><li>Vertical gradients &#8211;&nbsp;x1&nbsp;and&nbsp;x2&nbsp;are equal, and&nbsp;y1&nbsp;and&nbsp;y2&nbsp;differ.<\/li><li>Angular gradients &#8211;&nbsp;x1&nbsp;and&nbsp;x2&nbsp;vary, and&nbsp;y1&nbsp;and&nbsp;y2&nbsp;differ, too.<\/li><\/ul>\n\n\n\n<p>Never confuse an SVG linear gradient with the CSS\u00a0radial-gradient\u00a0property. CSS gradients apply to HTML elements, while the SVG gradients apply to SVG elements.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"example-of-the-lt-linear-gt-element-to-create-an-ellipse-with-a-horizontal-linear-gradient-6\">Example of the &lt;linear&gt; element to create an ellipse with a horizontal linear gradient:<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;body&gt;\n    &lt;svg height=\"200\" width=\"300\"&gt;\n      &lt;defs&gt;\n        &lt;linearGradient id=\"ellipse\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\"&gt;\n          &lt;stop offset=\"0%\" style=\"stop-color:rgb(28, 135, 201);stop-opacity:1\" \/&gt;\n          &lt;stop offset=\"100%\" style=\"stop-color:rgb(128, 0, 128);stop-opacity:1\" \/&gt;\n        &lt;\/linearGradient&gt;\n      &lt;\/defs&gt;\n      &lt;ellipse cx=\"150\" cy=\"90\" rx=\"105\" ry=\"65\" fill=\"url(#ellipse)\" \/&gt;\n    &lt;\/svg&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"example-of-the-lt-linear-gt-element-to-create-an-ellipse-with-a-vertical-linear-gradient-8\">Example of the &lt;linear&gt; element to create an ellipse with a vertical linear gradient:<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;body&gt;\n    &lt;svg height=\"300\" width=\"400\"&gt;\n      &lt;defs&gt;\n        &lt;linearGradient id=\"ellipse\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\"&gt;\n          &lt;stop offset=\"0%\" style=\"stop-color:rgb(28, 135, 201);stop-opacity:1\" \/&gt;\n          &lt;stop offset=\"100%\" style=\"stop-color:rgb(128, 0, 128);stop-opacity:1\" \/&gt;\n        &lt;\/linearGradient&gt;\n      &lt;\/defs&gt;\n      &lt;ellipse cx=\"250\" cy=\"100\" rx=\"110\" ry=\"70\" fill=\"url(#ellipse)\" \/&gt;\n    &lt;\/svg&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"attributes-10\">Attributes<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Value<\/th><th>Description<\/th><\/tr><\/thead><tbody><tr><td>gradientunits<\/td><td>This attribute specifies the coordinate system for attributes&nbsp;x1,&nbsp;x2,&nbsp;y1,&nbsp;y2.<\/td><\/tr><tr><td>gradienttransform<\/td><td>This attribute gives extra transformation to the gradient coordinate system.<\/td><\/tr><tr><td>href<\/td><td>This attribute specifies a reference to another &lt;linearGradient&gt; element.<\/td><\/tr><tr><td>spreadmethod<\/td><td>This attribute specifies how the gradient behaves if it starts or ends within the bounds of the shape that contains the gradient.<\/td><\/tr><tr><td>x1<\/td><td>This attribute specifies the x coordinate of the beginning point of the vector gradient along which the linear gradient is being drawn.<\/td><\/tr><tr><td>x2<\/td><td>This attribute specifies the y coordinate of the ending point of the vector gradient along which the linear gradient is being drawn.<\/td><\/tr><tr><td>y1<\/td><td>This attribute specifies the y coordinate of the beginning point of the vector gradient along which the linear gradient is drawn.<\/td><\/tr><tr><td>y2<\/td><td>This attribute specifies the y coordinate of the ending point of the vector gradient along which the linear gradient is drawn.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>The SVG &lt;linear> element also supports the\u00a0Global Attributes\u00a0and\u00a0Event Attributes.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Description of SVG gradients A gradient is a fluid transition from one color to another. It is possible to apply multiple color transitions to the same element. There exist two main kinds of gradients in SVG: linear radial The &lt;linearGradient&gt; element The &lt;linearGradient&gt;&gt; element specifies linear gradients that fill graphical elements. It should be nested [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[574],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/9317"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=9317"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/9317\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=9317"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=9317"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=9317"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}