Question

我使用SVG / Path生成一个大的向上指向三角形...请参阅下面的相关链接获取一些背景信息。

我要做的是在三角形的两边（左上角和右上角）添加一个插入的，模糊的阴影（simiar to box-shadow），但不是三角形的底边。还尝试逐渐变细阴影，使其不接触三角形的底部。以下链接是关于我想要做的粗略但不完全的概念的截图。

这是我到目前为止的代码：

＆＃13;

svg#bigTriangleColor {
    pointer-events: none; background: red;
}
.container svg {
    display: block;
}
svg:not(:root) {
    overflow: hidden;
}
#bigTriangleColor path {
    fill: #EEEEEE;
    stroke: #EEEEEE;
    stroke-width: 2;
}

＆＃13;

<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 L50 2 L100 100 Z"></path>
</svg>

＆＃13;

提前致谢，我们非常感谢任何帮助...

Answer 1

在三角形后面添加灰色形状以表示阴影。然后模糊它。

const re = /(.|)ing?(\1|\.)$/;

let ob = {[re]:re};

console.log(ob[re].test(`I match all strings end with "ing"`));

console.log(ob[re].test(`I match all strings end with ing.`));

console.log(ob[re].test(`I match all strings end with ing`));

console.log(Object.getOwnPropertyDescriptors(ob));

for (let {[re]:regexp} of [ob]) {
  console.log(regexp instanceof RegExp);
}

在SVG＆＃34; Path＆＃34;上生成内部阴影效果元素/三角形的两面

1 个答案: