小编Tud*_*scu的帖子

以编程方式减去 SVG 路径

我正在尝试找到一种从另一个 SVG 路径中减去 SVG 路径的方法，类似于反向剪辑蒙版。我无法使用过滤器，因为我需要找到复合路径与其他路径的交点。Illustrator 使用“减号前端”探路工具来实现此目的，如下所示：

红方块相减前的路径：

<rect class="cls-1" x="0.5" y="0.5" width="184.93" height="178.08"/>

Run Code Online (Sandbox Code Playgroud)

减法后：

<polygon class="cls-1" points="112.83 52.55 185.43 52.55 185.43 0.5 0.5 0.5 0.5 178.58 112.83 178.58 112.83 52.55"/>

Run Code Online (Sandbox Code Playgroud)

我需要它可以处理所有类型的形状，包括曲线。如果重要的话，输入的 SVG 将全部转换为通用路径。

javascript math svg

Tud*_*scu

lucky-day

7
推荐指数

2
解决办法

1367
查看次数

在悬停时使用动画颜色填充文本颜色动画

我希望在悬停在标题上时填充标题的文本颜色,但文本总是改变颜色,我不知道/认为你可以将一部分背景改为一种颜色而另一种颜色不断变化.我添加了实现悬停的代码,但没有过渡.

:root {
  --txt-color: #fff;
  --txt-box-bg: #424242;
  --main-bg: #000;
  /* front page title text */
  --main-front-color: #00a8ff;
  --second-front-color: #e84118;
  --third-front-color: #fbc531;
}

* {
  margin: 0px;
  padding: 0px;
}


/* Text */

.head-text {
  font-family: "IBM Plex Sans", sans-serif;
  color: var(--txt-color);
}

.main-text {
  font-family: "IBM Plex Mono" monospace;
  color: var(--txt-color);
}


/* Allgin */

.center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/* classes */

.front-page {
  background-color: var(--main-bg);
  color: #000;
  animation: text-rainbow 13s linear infinite;
} …

Run Code Online (Sandbox Code Playgroud)

html css css3 css-animations

Tud*_*scu

2018 11-07

4
推荐指数

1
解决办法

388
查看次数