首页 文章

使用CSS的SVG渐变

提问于
浏览
70

我正在尝试将渐变应用于SVG rect 元素 .

目前,我正在使用 fill 属性 . 在我的CSS文件中:

rect {
    cursor: pointer;
    shape-rendering: crispEdges;
    fill: #a71a2e;
}

在浏览器中查看时, rect 元素具有正确的填充颜色 .

但是,我想知道我是否可以对此元素应用线性渐变?

5 回答

  • 1

    只需在CSS中使用_3224079_属性中的任何内容即可 . 当然,这需要您在SVG中的某个位置定义线性渐变 .

    这是一个完整的例子:

    rect {
        cursor: pointer;
        shape-rendering: crispEdges;
        fill: url(#MyGradient);
    }
    
    <svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
          <style type="text/css">
            rect{fill:url(#MyGradient)}
          </style>
          <defs>
            <linearGradient id="MyGradient">
              <stop offset="5%" stop-color="#F60" />
              <stop offset="95%" stop-color="#FF6" />
            </linearGradient>
          </defs>
          
          <rect width="100" height="50"/>
        </svg>
    
  • 75

    在Finesse写的基础上,这里有一个更简单的方法来定位svg并改变它的渐变 .

    这是您需要做的:1 . 为渐变元素中定义的每个颜色停止分配类 . 2.使用普通类定位css并更改每个停靠点的停止颜色 . 赢了!

    使用类而不是 :nth-child 的一些好处是,它会想知道你是否需要在第一个孩子或第二个孩子上使用蓝色 .

    我已在所有Chrome,Firefox和IE11上测试过它:

    .main-stop {
      stop-color: red;
    }
    .alt-stop {
      stop-color: green;
    }
    
    <svg class="green" width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <linearGradient id="gradient">
        <stop class="main-stop" offset="0%" />
        <stop class="alt-stop" offset="100%" />
      </linearGradient>
      <rect width="100" height="50" fill="url(#gradient)" />
    </svg>
    

    请在此处查看可编辑示例:https://jsbin.com/gabuvisuhe/edit?html,css,output

  • 3

    2019答案

    使用全新的css属性,您可以使用变量更具灵活性 custom properties

    .shape {
      width:500px;
      height:200px;
    }
    
    .shape .gradient-bg {
      fill: url(#header-shape-gradient) #fff;
    }
    
    #header-shape-gradient {
      --color-stop: #f12c06;
      --color-bot: #faed34;
    }
    
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" class="shape">
      <defs>
        <linearGradient id="header-shape-gradient" x2="0.35" y2="1">
            <stop offset="0%" stop-color="var(--color-stop)" />
            <stop offset="30%" stop-color="var(--color-stop)" />
            <stop offset="100%" stop-color="var(--color-bot)" />
          </linearGradient>
      </defs>
      <g>
        <polygon class="gradient-bg" points="0,0 100,0 0,66" />
      </g>
    </svg>
    

    只需为渐变中的每个 stop 设置一个命名变量,然后在css中自定义 . 您甚至可以使用javascript动态更改其值,例如:

    document.querySelector('#header-shape-gradient').style.setProperty('--color-stop', "#f5f7f9");
    
  • -5

    这是一个解决方案,您可以使用CSS添加渐变并更改其颜色:

    // JS is not required for the solution. It's used only for the interactive demo.
    const svg = document.querySelector('svg');
    document.querySelector('#greenButton').addEventListener('click', () => svg.setAttribute('class', 'green'));
    document.querySelector('#redButton').addEventListener('click', () => svg.setAttribute('class', 'red'));
    
    svg.green stop:nth-child(1) {
      stop-color: #60c50b;
    }
    svg.green stop:nth-child(2) {
      stop-color: #139a26;
    }
    
    svg.red stop:nth-child(1) {
      stop-color: #c84f31;
    }
    svg.red stop:nth-child(2) {
      stop-color: #dA3448;
    }
    
    <svg class="green" width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <linearGradient id="gradient">
        <stop offset="0%" />
        <stop offset="100%" />
      </linearGradient>
      <rect width="100" height="50" fill="url(#gradient)" />
    </svg>
    
    
    <button id="greenButton">Green</button> <button id="redButton">Red</button>
  • 3

    以下是如何在目标元素上设置linearGradient:

    <style type="text/css">
        path{fill:url('#MyGradient')}
    </style>
    <defs>
        <linearGradient id="MyGradient">
            <stop offset="0%" stop-color="#e4e4e3" ></stop>
            <stop offset="80%" stop-color="#fff" ></stop>
        </linearGradient>
    </defs>
    

相关问题