我正在卡片中显示我的SVG图片
<div class="card-image">
<img src="/images/linux.svg" />
</div>
我无法在此处上传SVG文件,但是我想做的是:(触发事件后)
- 在开始时显示完整的原始SVG,但是在执行操作时,只有SVG图像的左半部分或右半部分显示为彩色,而另一半则为灰度。
- 我希望能够调整旋转角度,以便可以选择图像变灰的角度。
有人可以指出我正确的方向吗?
我正在卡片中显示我的SVG图片
<div class="card-image">
<img src="/images/linux.svg" />
</div>
我无法在此处上传SVG文件,但是我想做的是:(触发事件后)
有人可以指出我正确的方向吗?
您可以使用CSS在图像上添加线性渐变。
You could then use javascript to modify the style in the class, this could allow you to change properties such as colors, however, I am not exactly sure which property would control where the gradient start, but it's a good pointer if you need one. If you can find a way to select where the gradient start (in relation to, an offset for example, or maybe specific height) you could then have it be black and white and use JS to modify the position/color.