8

Почему при применении градиента вырезается часть окружности?

<svg width="900" height="200" viewBox="0 0 900 200" style='border: 1px solid black' >
 <defs>
    <radialGradient id="MyGradient" 
                    fx="25%" fy="25%" r="30%" >
      <stop offset="0%" stop-color="white"/>
      <stop offset="100%" stop-color="blue"/>
    </radialGradient>
  </defs>
  <circle cx="75" cy="75" r="70" 
          fill="url(#MyGradient)" />
</svg>

1
  • Из-за параметров fx="25%" fy="25%" r="30%"
    – Denis640Kb
    16 янв 2020 в 0:11

3 ответа 3

8

Из-за параметров заданных в MyGradient fx="25%" fy="25%" r="30%" Хотите, чтобы не обрезалось (Элемент был круглым) задайте r="100%"

<svg width="900" height="200" viewBox="0 0 900 200" style='border: 1px solid black' >
 <defs>
    <radialGradient id="MyGradient" 
                    fx="25%" fy="25%" r="100%" >
      <stop offset="0%" stop-color="white"/>
      <stop offset="100%" stop-color="blue"/>
    </radialGradient>
  </defs>
  <circle cx="75" cy="75" r="70" 
          fill="url(#MyGradient)" />
</svg>

0
7

Немного теории:

Атрибут gradientUnits, который описывает систему измерений, которую Вы собираетесь использовать, когда описываете размеры или ориентацию градиента. Данный атрибут принимает два возможных значения: userSpaceOnUse или objectBoundingBox - дефолтное значение. objectBoundingBox автоматически адаптирует градиент к размеру объекта, так что Вы можете указать координаты в виде значений от 0 до 1, и браузер автоматически их отпозиционирует. userSpaceOnUse позиционирует градиент в абсолютных единицах измерения.

Другими словами, если не указан атрибут gradientUnits он примет значение по умолчанию, - gradientUnits="objectBoundingBox" и все значения атрибутов градиента нужно указывать либо в процентах, либо в долях от единицы. Поэтому можно написать r="100%" или r="1", либо совсем не указывать радиус и он примет значение по умолчанию r="100%"

<svg width="900" height="200" viewBox="0 0 900 200" style='border: 1px solid black'>
 <defs>
    <radialGradient id="MyGradient" 
                    fx="0.25" fy="0.25" r="1" >
      <stop offset="0" stop-color="white"/>
      <stop offset="1" stop-color="blue"/>
    </radialGradient>
  </defs>
  <circle cx="75" cy="75" r="70" 
          fill="url(#MyGradient)" />
</svg>

атрибуты fx="0.25" fy="0.25" указывают координаты начальной точки радиального градиента, то есть откуда будут рисоваться цветные круги. Значение по умолчанию fx="50%" fy="50%", центр объекта, опять же можно не указывать.

<svg width="900" height="200" viewBox="0 0 900 200" style='border: 1px solid black' >
 <defs>
    <radialGradient id="MyGradient" 
                    fx="0.5" fy="0.5" r="1" >
      <stop offset="0" stop-color="white"/>
      <stop offset="1" stop-color="blue"/>
    </radialGradient>
  </defs>
  <circle cx="75" cy="75" r="70" 
          fill="url(#MyGradient)" />
</svg>

Анимация градиента

Для анимации градиента можно использовать любые атрибуты.
В примере ниже для анимации использованы атрибуты fx, fy

Получилась имитация движения источника света

<svg width="200" height="200" viewBox="0 0 200 200"  >
 <defs>
    <radialGradient id="MyGradient" 
                    fx="25%" fy="25%" r="100%" >
      <stop offset="0%" stop-color="#FFFFDB" stop-opacity="0.45"/>
      <stop offset="45%" stop-color="#C14092" stop-opacity="0.95"/>
	    <animate attributeName="fx" begin="0s" dur="10s" values="15%;75%;75%;15%;15%" repeatcount="indefinite" />
		  <animate attributeName="fy" begin="0s" dur="10s" values="10%;55%;55%;5%;5%" repeatcount="indefinite" />
    </radialGradient>
  </defs>
  <circle cx="75" cy="75" r="70" 
          fill="url(#MyGradient)" />
</svg>

Пример сложной анимации градиента

Работает во всех современных браузерах, включая Edge

Здесь использована система координат для градиента userSpaceOnUse поэтому значения атрибутов указаны в пикселях

<radialGradient id="sky-gradient" cx="737.45" cy="94.64" r="800.05" gradientUnits="userSpaceOnUse">

Отражение градиента реализовано с помощью вырезания прямоугольника с градиентом

<clipPath id="reflection">
      <rect width="1000" height="500"/>
    </clipPath>
<g clip-path="url(#reflection)" class="reflection">
      <use xlink:href="#sky" class="sky"></use>
      <rect id="ocean_light" class="ocean"  width="1000" height="500"/>
    </g>

и его переворачивания на 180 градусов вокруг оси Х


.reflection {
  -webkit-transform: scaleY(-1);
          transform: scaleY(-1);
  -webkit-transform-origin: 500px 500px;
          transform-origin: 500px 500px;
}

Ниже полный код:

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100vh;
  width: 100vw;
  background: #456;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
body:before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/17271/cork-wallet.png");
  mix-blend-mode: multiply;
}

.world {
  width: 100vw;
  height: 80vh;
  vertical-align: bottom;
}


@-webkit-keyframes sunset {
  25%,
  60% {
    -webkit-transform: rotateZ(180deg);
            transform: rotateZ(180deg);
  }
  80%,
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

@keyframes sunset {
  25%,
  60% {
    -webkit-transform: rotateZ(180deg);
            transform: rotateZ(180deg);
  }
  80%,
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}
.sun {
  fill: #ffd7ac;
}

.sky {
  -webkit-transform-origin: 500px 500px;
          transform-origin: 500px 500px;
  -webkit-animation: sunset 15s infinite;
          animation: sunset 15s infinite;
}

.reflection {
  -webkit-transform: scaleY(-1);
          transform: scaleY(-1);
  -webkit-transform-origin: 500px 500px;
          transform-origin: 500px 500px;
}

.ocean {
  fill: #fff;
  opacity: 0.2;
}

.hill {
  fill: #6d5d91;
}

.hill_back,
.hill_reflection {
  fill: #77669d;
}

.hill_reflection {
  opacity: 0.2;
}

@-webkit-keyframes stars {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.8;
  }
}

@keyframes stars {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.8;
  }
}
.stars {
  fill: #fff;
}

.star {
  opacity: 0.3;
  -webkit-animation: stars 5s infinite;
          animation: stars 5s infinite;
}

.star:nth-child(1) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.star:nth-child(2) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.star:nth-child(3) {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}

.star:nth-child(4) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

.star:nth-child(5) {
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}

.star:nth-child(6) {
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}

.star:nth-child(7) {
  -webkit-animation-delay: 3.5s;
          animation-delay: 3.5s;
}
<body>
  <svg viewBox="0 0 1000 1000" class="world" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
  <defs>
  
    <clipPath id="clip-path">
      <circle  cx="500" cy="500" r="400"/>
    </clipPath>
    
    <clipPath id="reflection">
      <rect width="1000" height="500"/>
    </clipPath>
    
    <symbol id="star" viewBox="-20 -20 40 40">
      <circle class="stars" r="20"/>
    </symbol>

    <radialGradient id="sky-gradient" cx="737.45" cy="94.64" r="800.05" gradientUnits="userSpaceOnUse">
      <stop offset="0.03" stop-color="#ffd7ac"/>
      <stop offset="0.5" stop-color="#f8a7a1"/>
      <stop offset="0.92" stop-color="#6d5d91"/>
    </radialGradient>
    
    <symbol id="sky" viewBox="0 0 1000 1000">
      <rect width="1000" height="1000" fill="url(#sky-gradient)"/>
      <circle id="sun" class="sun" cx="658" cy="265" r="62"/>
      <use width="10" height="10" x="350" y="550" xlink:href="#star" class="star" />
      <use width="10" height="10" x="470" y="650" xlink:href="#star" class="star" />
      <use width="8" height="8" x="430" y="750" xlink:href="#star" class="star" />
      <use width="9" height="9" x="250" y="650" xlink:href="#star" class="star" />
      <use width="9" height="9" x="590" y="780" xlink:href="#star" class="star" />
      <use width="5" height="5" x="700" y="750" xlink:href="#star" class="star" />
      <use width="4" height="4" x="300" y="800" xlink:href="#star" class="star" />
    </symbol>
  </defs>

  <g id="planet" clip-path="url(#clip-path)">
    <use xlink:href="#sky" class="sky" ></use>
    <g clip-path="url(#reflection)" class="reflection">
      <use xlink:href="#sky" class="sky"></use>
      <rect id="ocean_light" class="ocean"  width="1000" height="500"/>
    </g>
    <path class="hill_reflection" d="M638 547H457l51-32H-22l294 148 35-22 148 71 183-165"/>
    <path class="hill_back" d="M-22 526l294-177 236 177H-22"/>
    <path class="hill" d="M108 547l347-159 183 159H108"/>
  </g>
</svg>

  
</body>

Источник, немного доработанный

2
  • в элементе <radialGradient id="MyGradient" fx="0.5" fy="0.5" r="1" > будет рисовать круг заданных цветов если круг сдвинут в угол fx и fy он обрезается т.к выходит за рамки фигуру circle верно ?
    – Leks
    16 янв 2020 в 21:48
  • @Leks Написал ответ по твоему вопросу, так как лучше показать всё это на примере 17 янв 2020 в 10:45
3

Ответ к комментарию @Leks

в элементе <radialGradient id="MyGradient" fx="0.5" fy="0.5" r="1" > будет рисовать круг заданных цветов если круг сдвинут в угол fx и fy он обрезается т.к выходит за рамки фигуры circle верно ? –

При fx="0.5" fy="0.5" r="1" Начальная точка градиента расположена точно по центру фигуры. fx=0.5 или, что тоже самое fx=50% - это получается симметричный, равный половине отступ от краев, то есть центр.

Смещение, например в левый верхний угол будет при fx="0" fy="0"естественно при таком смещении на фигуре будет находиться только одна, нижняя, правая четверть кругового градиента.

Ниже пример анимации демонстрирующий наложение градиента на элемент при разных
значениях fx, fy

<animate xlink:href="#radGrad"
      attributeName="fy"
      dur="2s"begin="gr1.click"
      values="0%;50%;50%;100%;100%;0%"
      keyTimes="0;0.1;0.5;0.9;1"
      repeatCount="1"
      restart="whenNotActive" />

При fy="0%" начальная точка градиента в левом, верхнем углу
при fy="50%" - в центре
при fy="100%" - начальная точка градиента в правом, нижнем углу

svg {
 width:50%;
 height:50%;
 }
 .txt {
 font-family:sans-serif;
 font-size:28px;
 font-weight:bold;
 text-anchor:middle;
 fill:#FFDD00;
  }
<div id="shine-div">
   <svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 100">
   <defs>
  <radialGradient id="radGrad"  fx="0%" fy="0%" r="100%">
        <stop offset="0%" stop-color ="#FFFFFF" />
	    <stop offset="4%" stop-color ="#ffb3ff" />
	    <stop offset="12.25%" stop-color ="#ff33ff" />
	    <stop offset="31.25%" stop-color ="#800080" />
	    <stop offset="50%" stop-color ="#b300b3" /> 		 
  </radialGradient>
   </defs> 
    <g id="gr1" > 
      <rect id="rect1" fill="url(#radGrad)" x="5%" y="5%" width="95%" height="95%" rx="10%"/> 
       <text class="txt" x="50%" y="60%"> Sun shine </text>
	</g>  
    <animate xlink:href="#radGrad"
	  attributeName="fy"
	  dur="2s"begin="gr1.click"
	  values="0%;50%;50%;100%;100%;0%"
	  keyTimes="0;0.1;0.5;0.8;0.9;1"
	  repeatCount="1"
	  restart="whenNotActive" />
	  
	     <animate xlink:href="#radGrad"
			  attributeName="fx"
			  dur="2s"begin="gr1.click"
			  values="0%;50%;50%;100%;100%;0%"
			  keyTimes="0;0.1;0.5;0.8;0.9;1"
			  repeatCount="1"
			  restart="whenNotActive" />
  </svg>
</div>

1
  • @Leks` fx` отвечает только за расположение начальной точки градиента, от которой уже рисуются круги. Обрезает фигуру, только малый радиус и то при условии, что начальная точка градиента находится у края фигуры Ну как было в твоем вопросе fx="25%" fy="25%" r="30%" 17 янв 2020 в 11:22

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.