|
|
2
enxaneta
5 年前
你可以把
#star
道路
<defs>
没有填充或笔划,你可以在第一次使用
fill-opacity="0.5"
蓝色笔划和第二次使用过滤器,如果这是你需要的。
svg{border:1px solid}
<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-10 -10 360 150" class="slide" shape-rendering="geometricPrecision" fill-rule="evenodd">
<defs>
<path id="star" stroke-miterlimit="8" d="M0,63.904L17.609,51.5L8.562,31.952L30.014,30.014L31.952,8.562L51.5,17.609L63.904,0L76.309,17.609L95.857,8.562L97.795,30.014L119.247,31.952L110.199,51.5L127.809,63.904L110.199,76.309L119.247,95.857L97.795,97.795L95.857,119.247L76.309,110.199L63.904,127.809L51.5,110.199L31.952,119.247L30.014,97.795L8.562,95.857L17.609,76.309Z" />
<filter id="offsetColoredShape" height="500%" width="500%" x="-275%" y="-275%">
<feColorMatrix in="SourceAlpha" type="matrix" values="
0 0 0 0 1
0 0 0 0 0.439
0 0 0 0 0
0 0 0 1 0"
result="changeToOrangeFill"/>
<feComponentTransfer result="changedAgain">
<feFuncR type="linear" slope="1" />
<feFuncG type="linear" slope="0.439" />
<feFuncB type="linear" slope="0" />
<feFuncA type="linear" slope="1" />
</feComponentTransfer>
<feOffset dx="120"/>
</filter>
</defs>
<use xlink:href="#star" filter="url(#offsetColoredShape)" />
<use xlink:href="#star" fill="rgb(255,112,0)" fill-opacity="0.5" stroke="#0000FF" stroke-width="4" />
</svg>
使现代化
评论如下:
我想知道为什么,尽管在feColorMatrix中丢弃了所有颜色值并将alpha设置为100%,但alpha值仍保留了下来。
这是因为使用的元素(即
#明星
)有
填充不透明度=“0.5”
.您需要使用不带
fill-opacity
属性
在这个简单的例子中,你可以看到我不能修改
fill
关于
<use>
因为使用的元素有一个填充。不过,我可以添加一个笔划,因为
<使用>
元素没有笔划:
<svg viewBox="0 0 100 50">
<circle id="c" fill="deepPink" stroke-width="5" cx="20" cy="25" r="10"></circle>
<use xlink:href="#c" x="50" fill="gold" stroke="skyBlue" />
</svg>
OP还评论说,之前的解决方案
在生成形状并在事实发生后简单插入过滤器时不起作用。
在下一个演示中,我将生成
#明星
.接下来我将生成过滤后的
<使用>
元素,它可以工作
const SVG_NS = 'http://www.w3.org/2000/svg';
const SVG_XLINK = "http://www.w3.org/1999/xlink";
const svg = document.querySelector("svg")
let d = "M0,63.904 L17.609,51.5L8.562,31.952L30.014,30.014L31.952,8.562L51.5,17.609L63.904,0L76.309,17.609L95.857,8.562L97.795,30.014L119.247,31.952L110.199,51.5L127.809,63.904L110.199,76.309L119.247,95.857L97.795,97.795L95.857,119.247L76.309,110.199L63.904,127.809L51.5,110.199L31.952,119.247L30.014,97.795L8.562,95.857L17.609,76.309Z"
let star = drawSVGelmt({d:d,id:"star"},"path", theDefs);
let use1 = document.createElementNS(SVG_NS, 'use');
use1.setAttributeNS(SVG_XLINK, 'xlink:href', '#star');
use1.setAttribute('class', 'filtered');
svg.appendChild(use1)
function drawSVGelmt(o,tag, parent) {
let elmt = document.createElementNS(SVG_NS, tag);
for (let name in o) {
if (o.hasOwnProperty(name)) {
elmt.setAttributeNS(null, name, o[name]);
}
}
parent.appendChild(elmt);
return elmt;
}
.filtered{filter:url(#offsetColoredShape)}
<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-10 -10 360 150" class="slide" shape-rendering="geometricPrecision" fill-rule="evenodd">
<defs id="theDefs">
<filter id="offsetColoredShape" height="500%" width="500%" x="-275%" y="-275%">
<feColorMatrix in="SourceAlpha" type="matrix" values="
0 0 0 0 1
0 0 0 0 0.439
0 0 0 0 0
0 0 0 1 0"
result="changeToOrangeFill"/>
<feComponentTransfer result="changedAgain">
<feFuncR type="linear" slope="1" />
<feFuncG type="linear" slope="0.439" />
<feFuncB type="linear" slope="0" />
<feFuncA type="linear" slope="1" />
</feComponentTransfer>
<feOffset dx="120"/>
</filter>
</defs>
<use xlink:href="#star" fill="rgb(255,112,0)" fill-opacity="0.5" stroke="#0000FF" stroke-width="4" />
</svg>
|
