Illustrator SVG 效果编码问题
我在编码 SVG XML 并按照我的预期在 Illustrator 中重现它时遇到了一些真正的大问题。现在的主要问题是 feColorMatrix 效果。我了解效果以及矩阵如何改变像素,但我遇到的问题是,当我在任何颜色通道行上指定 0.5 作为最终输出结果时,Illustrator 不会将 0.5 解释为 RGB 127,换句话说,50%颜色值。它更像是 0.215 等于 RGB 十进制的 127。下面是一些代码:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.2"
viewBox="0 0 576 432"
width="576"
height="432"
baseProfile="tiny"
id="NicoleLovesSVG">
<g id="Canvas">
<rect
width="576"
height="432"
x="0"
y="0"
transform="scale(1,1)"
id="Canvas-Rect1"
style="fill:#9d8654;fill-rule:evenodd;" />
</g>
<defs>
<filter id="ShadowFilter-Text1" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" width="200%" height="200%" x="-50%" y="-50%">
<feColorMatrix type="matrix" in="SourceAlpha"
values="0 0 0 0 .5
0 0 0 0 0
0 0 0 0 0
0 0 0 1 0"/>
<feOffset dx="24.395183950936" dy="24.395183950936" result="shadow"/>
<feBlend in="SourceGraphic" in2="shadow" mode="normal"/>
</filter>
</defs>
<g
id="Text1"
transform="translate(1.1272727272727,297.27272727273) rotate(0) scale(3.5238813920454546,2.642911044034091)"
style="fill:#003300;fill-opacity:1;fill-rule:evenodd;stroke:#ff0000;stroke-width:15px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;"
filter="url(#ShadowFilter-Text1)">
<g
id="Text1-Line1"
transform="translate(0,0)">
<path
transform="translate(0,0)"
vector-effect="non-scaling-stroke"
id="Text1-Line1-Glyph1"
d="M 0,0 M 46.4,-98.24 L 46.4,-15.68 C 46.4,-8.96 47.466666666667,-3.7333333333333 49.6,-0 L 30.4,-0 C 32.533333333333,-3.7333333333333 33.6,-8.96 33.6,-15.68 L 33.6,-98.24 L 31.36,-98.24 C 21.653333333333,-98.24 12.106666666667,-96.373333333333 2.72,-92.64 L 8.32,-106.72 L 79.68,-106.72 L 74.56,-92.64 C 68.693333333333,-96.48 59.306666666667,-98.346666666667 46.4,-98.24 z" />
</g>
</g>
</svg>
如您所见,第一个过滤器检索全黑的 SourceAlpha。然后颜色矩阵采用该值并在矩阵的第一行执行此操作:
(ax red) + (bx green) + (cx blue) + (dx alpha) + e = 最终红色输出
插入数字:
(0 x 0) + (0 x 0) + (0 x 0) + (0 x 0) + 0.5 = 0.5
应为 50% 红色!或者127 RGB!!!我算了一下,在 Illy 中它更像是 0.215 = 127 = 50% ??????
I am having some REAL big problems coding SVG XML and having it being reproduced in Illustrator as I am expecting. Major problem right now is the feColorMatrix effect. I understand the effect and how the matrix changes the pixels but problem I am having is that when I specify 0.5 as the final output result on any of the color channel rows, Illustrator is not interpreting 0.5 as RGB 127, in other words, 50% the color value. It is more like 0.215 equates to 127 RGB decimal. Here is some code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.2"
viewBox="0 0 576 432"
width="576"
height="432"
baseProfile="tiny"
id="NicoleLovesSVG">
<g id="Canvas">
<rect
width="576"
height="432"
x="0"
y="0"
transform="scale(1,1)"
id="Canvas-Rect1"
style="fill:#9d8654;fill-rule:evenodd;" />
</g>
<defs>
<filter id="ShadowFilter-Text1" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" width="200%" height="200%" x="-50%" y="-50%">
<feColorMatrix type="matrix" in="SourceAlpha"
values="0 0 0 0 .5
0 0 0 0 0
0 0 0 0 0
0 0 0 1 0"/>
<feOffset dx="24.395183950936" dy="24.395183950936" result="shadow"/>
<feBlend in="SourceGraphic" in2="shadow" mode="normal"/>
</filter>
</defs>
<g
id="Text1"
transform="translate(1.1272727272727,297.27272727273) rotate(0) scale(3.5238813920454546,2.642911044034091)"
style="fill:#003300;fill-opacity:1;fill-rule:evenodd;stroke:#ff0000;stroke-width:15px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;"
filter="url(#ShadowFilter-Text1)">
<g
id="Text1-Line1"
transform="translate(0,0)">
<path
transform="translate(0,0)"
vector-effect="non-scaling-stroke"
id="Text1-Line1-Glyph1"
d="M 0,0 M 46.4,-98.24 L 46.4,-15.68 C 46.4,-8.96 47.466666666667,-3.7333333333333 49.6,-0 L 30.4,-0 C 32.533333333333,-3.7333333333333 33.6,-8.96 33.6,-15.68 L 33.6,-98.24 L 31.36,-98.24 C 21.653333333333,-98.24 12.106666666667,-96.373333333333 2.72,-92.64 L 8.32,-106.72 L 79.68,-106.72 L 74.56,-92.64 C 68.693333333333,-96.48 59.306666666667,-98.346666666667 46.4,-98.24 z" />
</g>
</g>
</svg>
As you can see, the first filter retrieves the SourceAlpha which is all black. Then the color matrix takes that and does this on the first row of the matrix:
(a x red) + (b x green) + (c x blue) + (d x alpha) + e = final red output
plugging in the numbers:
(0 x 0) + (0 x 0) + (0 x 0) + (0 x 0) + 0.5 = 0.5
Should be 50% red! Or 127 RGB!!! I did the math and in Illy it is more like 0.215 = 127 = 50% ??????
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
这是由于滤镜使用的色彩空间造成的,默认情况下为线性RGB。
您可以通过在上指定 上直接元素。请参阅颜色插值滤镜。
color-interpolation-filters="sRGB"
来获得所需的行为。元素,或者在This is due to the color space used by filters, which per default is linearRGB.
You can get the behaviour you want by specifying
color-interpolation-filters="sRGB"
on the <filter> element, or on the <feColorMatrix> element directly. See color-interpolation-filters.