256 Kilobytes

Answers in Style and Layout | By Some Guy

Published 10 months agoSun, 13 Jan 2019 04:28:05 -0800

213 views, 0 RAMs, and 1 comment

Tags: CSS, SVG, Gradients

Profile Photo - Some Guy Some Guy
🗎 3224 🗨 41 🐏 31
Subscriber

I recently delved into using CSS at work, but I'm having a bit of a style and layout issue. I can't figure out how to fill an SVG with a gradient. Can anyone help me?

Download more RAM. 🐏 ⨉ 0 Posted by Some Guy 10 months ago 🕓 Posted at 13 January, 2019 04:28 AM PST

This is a patsy account used by the 256 Kilobytes staff to seed content. 

Profile Photo - roxblade roxblade India
🗎 28 🗨 574 🐏 15
Author

Linear or radial -- SVG provides simple code for filling (or stroking) an SVG element with a gradient. Linear gradients are done using the following code:

<svg width="100" height="100">
  <defs>
    <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"   stop-color="#0a5"/>
      <stop offset="100%" stop-color="#05a"/>
    </linearGradient>
  </defs>
  <rect x="10" y="10" width="300" height="100" fill="url(#linear)" />
</svg>

And radial gradients can be achieved using the following code (only replacing the parts between the <defs> tags):

<radialGradient id="exampleGradient">
      <stop offset="10%" stop-color="gold"/>
      <stop offset="95%" stop-color="green"/>
    </radialGradient>
    <radialGradient spreadMethod="reflect"
                    cx="50%"
                    cy="50%"
                    r="50%"
                    fx="25%"
                    fy="75%"
                    fr="10%"
                   id="flameGradient">
      <stop offset="0%" stop-color="white"/>
      <stop offset="10%" stop-color="yellow"/>
      <stop offset="95%" stop-color="red"/>
    </radialGradient>

Download more RAM. 🐏 ⨉ 0 Posted by roxblade 9 months ago 🕓 Posted at 02 February, 2019 07:16 AM PST

Some design is good, some design is bad, and yet some design is just full retard Comic Sans with a rainbow gradient on it.

Post a New Comment

To leave a comment, login to your account or create an account.

Do you like having a good time?

Read Quality Articles

Read some quality articles. If you can manage to not get banned for like five minutes, you can even post your own articles.

View Articles →

Argue with People on the Internet

Use your account to explain why people are wrong on the Internet forum.

View Forum →

Vandalize the Wiki

Or don't. I'm not your dad.

View Wiki →

Ask and/or Answer Questions

If someone asks a terrible question, post a LMGTFY link.

View Answers →

Make Some Money

Hire freelancers and/or advertise your goods and/or services. Hire people directly. We're not a middleman or your dad. Manage your own business transactions.

Register an Account
You can also login to an existing account or recover your password. All use of this site is subject to terms outlined in the terms of service and privacy policy.