SVG rect요소에 그라디언트를 적용하려고합니다 .

현재는 fill속성을 사용하고 있습니다. 내 CSS 파일에서 :

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

그리고 rect요소는 브라우저에서 볼 때 올바른 채우기 색상을 갖습니다.

그러나이 요소에 선형 그래디언트를 적용 할 수 있는지 알고 싶습니다.

fill속성 에서 사용하는 모든 것을 CSS에서 사용하십시오 . 물론 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>

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에서 원하는대로 사용자 지정하면됩니다. 다음과 같이 자바 스크립트를 사용하여 값을 동적으로 변경할 수도 있습니다.

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

Finesse가 작성한 내용을 바탕으로 svg를 대상으로하고 그라디언트를 변경하는 더 간단한 방법이 있습니다.

다음을 수행해야합니다.

1. 그라디언트 요소에 정의 된 각 색상 중지에 클래스를 할당합니다.
2. CSS를 대상으로하고 일반 클래스를 사용하여 각 정류장의 중지 색상을 변경합니다.
3. 승리!

대신 클래스를 사용하는 몇 가지 이점은 :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에서 확인 하십시오.

다음은 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>

<br/>
<button id="greenButton">Green</button>
<button id="redButton">Red</button>

모든 정확한 답변에 감사드립니다.

섀도우 돔에서 svg를 사용하여 필요한 3 개의 선형 그래디언트를. 웹 구성 요소에 CSS 채우기 규칙을 배치하고 채우기 상속이 작업을 수행합니다.

<svg viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
  <path
    d="m258 0c-45 0-83 38-83 83 0 45 37 83 83 83 45 0 83-39 83-84 0-45-38-82-83-82zm-85 204c-13 0-24 10-24 23v48c0 13 11 23 24 23h23v119h-23c-13 0-24 11-24 24l-0 47c0 13 11 24 24 24h168c13 0 24-11 24-24l0-47c0-13-11-24-24-24h-21v-190c0-13-11-23-24-23h-123z"></path>
</svg>

<svg height="0" width="0">
  <defs>
    <linearGradient id="lgrad-p" gradientTransform="rotate(75)"><stop offset="45%" stop-color="#4169e1"></stop><stop offset="99%" stop-color="#c44764"></stop></linearGradient>
    <linearGradient id="lgrad-s" gradientTransform="rotate(75)"><stop offset="45%" stop-color="#ef3c3a"></stop><stop offset="99%" stop-color="#6d5eb7"></stop></linearGradient>
    <linearGradient id="lgrad-g" gradientTransform="rotate(75)"><stop offset="45%" stop-color="#585f74"></stop><stop offset="99%" stop-color="#b6bbc8"></stop></linearGradient>
  </defs>
</svg>

<div></div>

<style>
  :first-child {
    height:150px;
    width:150px;
    fill:url(#lgrad-p) blue;
  }
  div{
    position:relative;
    width:150px;
    height:150px;
    fill:url(#lgrad-s) red;
  }
</style>
<script>
  const shadow = document.querySelector('div').attachShadow({mode: 'open'});
  shadow.innerHTML="<svg viewbox=\"0 0 512 512\">\
    <path d=\"m258 0c-45 0-83 38-83 83 0 45 37 83 83 83 45 0 83-39 83-84 0-45-38-82-83-82zm-85 204c-13 0-24 10-24 23v48c0 13 11 23 24 23h23v119h-23c-13 0-24 11-24 24l-0 47c0 13 11 24 24 24h168c13 0 24-11 24-24l0-47c0-13-11-24-24-24h-21v-190c0-13-11-23-24-23h-123z\"></path>\
  </svg>\
  <svg height=\"0\">\
  <defs>\
    <linearGradient id=\"lgrad-s\" gradientTransform=\"rotate(75)\"><stop offset=\"45%\" stop-color=\"#ef3c3a\"></stop><stop offset=\"99%\" stop-color=\"#6d5eb7\"></stop></linearGradient>\
    <linearGradient id=\"lgrad-g\" gradientTransform=\"rotate(75)\"><stop offset=\"45%\" stop-color=\"#585f74\"></stop><stop offset=\"99%\" stop-color=\"#b6bbc8\"></stop></linearGradient>\
  </defs>\
</svg>\
";
</script>

코드 펜에서 내 테스트보기

첫 번째는 일반 SVG이고 두 번째는 그림자 돔 내부에 있습니다.

대상 요소에 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>