主页 / 问题 / 1070430
Accepted
Leks
Asked:2020-01-16 07:10:31 +0000 UTC2020-01-16 07:10:31 +0000 UTC

为什么应用渐变时形状会被剪裁？

  • 772

为什么在应用渐变时会切掉一部分圆圈？

<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>

css

3 个回答

  1. 由于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>

    • 8
  2. Best Answer

    一点理论：

    gradientUnits描述渐变尺寸或方向时要使用的测量系统的属性。此属性有两个可能的值： userSpaceOnUse或objectBoundingBox- 默认值。 objectBoundingBox自动使渐变适应对象的大小，因此您可以将坐标指定为从 0 到 1 的值，浏览器会自动定位它们。userSpaceOnUse 以绝对单位定位梯度。

    换句话说，如果没有指定属性，gradientUnits它将采用默认值 -gradientUnits="objectBoundingBox"并且渐变属性的所有值都必须以百分比或 1 的分数指定。因此，您可以写r="100%"or 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>

    源代码，稍作修改

    • 7

  3. 回复@Leks 评论

    如果圆移动到角 fx 和 fy 将在元素<radialGradient id="MyGradient" fx="0.5" fy="0.5" r="1" > 中绘制一个给定颜色的圆，因为它超出了圆形，所以它被切断了，对吗？-

    渐变的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>

    • 3

相关问题