小编Mic*_*any的帖子
将两个 SVG feColorMatrix 滤镜效果合并为一个矩阵？
我正在使用 SVG 过滤器在一些复杂的路径上创建模糊的“投影”类型效果。
<defs>
<filter id="dropshadow" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feColorMatrix result="hueOut" in="SourceAlpha" type="hueRotate" values="340"/>
<feColorMatrix result="satOut" in="hueOut" type="saturate" values="3"/>
<feGaussianBlur in="satOut" stdDeviation="8"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
我feColorMatrix纯粹是通过反复试验得出上述值。（如果我单独使用矩阵数学，我永远不会想出从暗到亮的特别美丽的色调转变。）基本上，我将色轮旋转 340 度，然后使色轮饱和颜色使用值 3，就在模糊它之前。（规范过去对此有些不清楚，但反复试验表明，大于 1 的值type="saturate"会使图像饱和，而小于 1 的值会使图像去饱和。）
问题是：我在大量路径上进行迭代，而双矩阵运算使我的机器慢下来。它经常崩溃。
某些矩阵数学大师能否帮我算出数字，以便将上面的两个 feColorMatrix 过滤器组合成一个更高效feColorMatrix的 type="matrix" 过滤器基元？我明白了规范的要点，但我在数学方面不知所措。
推荐指数
解决办法
查看次数
反向法 - 1.9.1 v 1.8.7
我写了一些代码:
output = File.open(text_file).collect.reverse.join("<BR>")
它似乎在1.8.7上工作正常,但抛出错误
NoMethodError - undefined method 'reverse' for #<Enumerator: #<File:C:\EduTester\cron\rufus.log>:collect>:
1.9.1(ruby 1.9.3p194(2012-04-20)[i386-mingw32])
有人知道为什么会发生这种情况以及如何解决这个问题？(为什么我最感兴趣.)
推荐指数
解决办法
查看次数
为什么文字不是白色的？
这是来源:
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>White</title>
<style>
body {
background-color: black;
}
.quadrant-legend {
position: absolute;
left : 28px;
width : 288px;
height : 62px;
}
.quadrant-legend-img {
position: absolute;
top : 0;
left : 0;
z-index : 3;
}
.quadrant-legend-btn {
position: absolute;
top : 6px;
right : 34px;
z-index : 3;
}
.quadrant-legend-text {
margin-left: 16px;
margin-top : 16px;
font-family: arial, sans-serif;
font-size : 26px;
color : white;
z-index : 4;
}
#quadrant-legend-asset {
top: …推荐指数
解决办法
查看次数
在Firefox中截断的SVG路径图
我使用了从这里取得的纯css和svg切换开关复选框,并且=它在所有浏览器上都运行良好,直到我的Firefox更新到新的Firefox Quantum(版本57.0),其中一半的开关未被绘制.我的矢量技术确实很低,我不太了解Firefox Quantum,我不知道它出了什么问题.
任何帮助将受到高度赞赏.
这就是Chrome和Explorer的外观
这是在Firefox Quantum上
在Firefox Quantum中看起来正在绘制的路径是
<path class='shape' d='M88.256,43.76c12.188,0,21.88-9.796,21.88-21.88S100.247,0,88.256,0c-15.745,0-20.67,12.281-33.257,12.281'></path>
而不是完整的路径,这是
<path class='shape' d='M88.256,43.76c12.188,0,21.88-9.796,21.88-21.88S100.247,0,88.256,0c-15.745,0-20.67,12.281-33.257,12.281,S38.16,0,21.731,0C9.622,0-0.149,9.796-0.149,21.88s9.672,21.88,21.88,21.88c17.519,0,20.67-13.384,33.263-13.384,S72.784,43.76,88.256,43.76z'></path>
看起来浏览器忽略了路径的很大一部分.
这里是codepen,这里是完整的代码:
html:
<div class='checkbox'>
<label class='checkbox__container'>
<input class='checkbox__toggle' type='checkbox'>
<span class='checkbox__checker'></span>
<span class='checkbox__txt-left'>On</span>
<span class='checkbox__txt-right'>Off</span>
<svg class='checkbox__bg' space='preserve' style='enable-background:new 0 0 110 43.76;' version='1.1' viewbox='0 0 110 43.76'>
<path class='shape' d='M88.256,43.76c12.188,0,21.88-9.796,21.88-21.88S100.247,0,88.256,0c-15.745,0-20.67,12.281-33.257,12.281,S38.16,0,21.731,0C9.622,0-0.149,9.796-0.149,21.88s9.672,21.88,21.88,21.88c17.519,0,20.67-13.384,33.263-13.384,S72.784,43.76,88.256,43.76z'></path>
</svg>
</label>
</div>
SCSS:
.ext-cross{
&:before, &:after{
content:"";
display: block;
position: absolute;
width: 14px;
height: 2px;
margin: 0 auto;
top: 20px;
left: 0;
right: 0;
background-color: #bf1e1e;
border-radius: …推荐指数
解决办法
查看次数
更改画布元素的颜色
我正在尝试动态更改画布上绘制的线条的颜色...
ctx.moveTo(0, 0);
ctx.lineTo(0, 200);
ctx.strokeStyle = "Grey"
它可能是鼠标悬停事件或按下按钮或鼠标单击事件，我想更改线条的颜色或使其加粗。是否可以通过添加事件来更改颜色，或者是否可以为特定元素的事件提供样式？
推荐指数
解决办法
查看次数
请解释SVG路径命令和坐标
在 SVG 文件中，我找到了一个如下所示的路径：
<path id="kvg:0548b-s7" kvg:type="?b" d="M65.32,48.38c5.65-0.95,12.61-2.46,18.92-3.42c2.05-0.45,4.13-0.5,6.23-0.13"/>
有人可以解释一下坐标48.38c5.65-0.95和18.92-3.42c2.05-0.45代表什么吗？
推荐指数
解决办法
查看次数
标签 统计
svg ×3
css ×2
html ×2
canvas ×1
colormatrix ×1
css3 ×1
firefox ×1
html5 ×1
javascript ×1
ruby ×1
svg-filters ×1
svg-path ×1