javascript - 仅显示 SVG 的一半

Question

我正在卡片中显示我的 SVG 图像

  <div class="card-image">
    <img src="/images/linux.svg" />
  </div>

我无法在这里上传 SVG 文件，但我想做的是:(事件触发后)

• 一开始显示完整的原始 SVG，但是当执行操作时，只有 SVG 图像的左半部分或右半部分以彩色显示，而另一半则以灰度显示。
• 我希望能够调整旋转，以便可以选择图像变灰的 Angular 。

有人能指出我正确的方向吗？

Answer 1

你可以在容器上设置一个伪元素，并为这个伪元素设置一个渐变，一半是透明的，另一半是灰色的。线性渐变可以设置为您想要的 Angular

.card-image {
    width: 200px;
    height: 300px;
    display: inline-block;
    position: relative;
}

.grayed:after {
    content: "";
    position: absolute;
    width: 100%; 
    height: 100%;
    left: 0;
    z-index: 9;
    background-image: linear-gradient(110deg, transparent 50%, #888a 50%);

}

<div class="card-image">
    <img src="http://placekitten.com/200/300" />
</div>
<div class="card-image grayed">
    <img src="http://placekitten.com/200/300" />
</div>

.card-image {
    width: 600px;
    height: 400px;
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.grayed:after {
    content: "";
    position: absolute;
    width: 200%; 
    height: 200%;
    left: 50%;
    top: -50%;
    z-index: 9;
    background-color: white;
    mix-blend-mode: color;
    transform: rotate(30deg);
    transform-origin: left center;
    animation: rotate infinite 10s linear;
}

@keyframes rotate {
    from {     transform: rotate(0deg);}
    to {     transform: rotate(360deg);}

}

<div class="card-image grayed">
    <img src="http://placekitten.com/600/400" />
</div>