Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/svg/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
为什么SVG feColorMatrix+&书信电报;使用xlink:href="#&引用/&燃气轮机;是否会导致路径被剪裁?_Svg_Svg Filters - Fatal编程技术网

为什么SVG feColorMatrix+&书信电报;使用xlink:href="#&引用/&燃气轮机;是否会导致路径被剪裁?

为什么SVG feColorMatrix+&书信电报;使用xlink:href="#&引用/&燃气轮机;是否会导致路径被剪裁?,svg,svg-filters,Svg,Svg Filters,当我在元素上使用过滤器时,为什么从截面引用的形状看起来不同(剪裁!) 白色星星显示正确(“尖角”) 但是棕色(过滤过的)恒星被奇怪地剪掉了 代码段: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"> <filter id="colorScheme"> &l

当我在元素上使用过滤器时,为什么从截面引用的形状看起来不同(剪裁!)

  • 白色星星显示正确(“尖角”)
  • 但是棕色(过滤过的)恒星被奇怪地剪掉了
代码段:

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
        <filter id="colorScheme">
            <feColorMatrix in="SourceGraphic" type="matrix" color-interpolation-filters="sRGB"  values="0.5 0.0   0.0   0.0 0.0 0.0   0.3 0.0   0.0 0.0 0.0   0.0   0.0   0.0 0.0 0.0   0.0   0.0   1.0 0.0"/>
        </filter>
        <defs>
            <g id="shape_star">
                <path d="M 50.000001,16.850071 60.828477,38.790929 85.041657,42.309326 67.520845,59.387917 71.656934,83.503263 50,72.117556 28.343064,83.503262 32.479155,59.387917 14.958344,42.309324 39.171522,38.790929 Z"/>
            </g>
            <g id="img_star_active">
                <use xlink:href="#shape_star" style="stroke: #FFFFFF; stroke-width: 10; fill: #FFFFFF;"/>
            </g>
            <g id="img_star_inactive">
                <use xlink:href="#shape_star" style="stroke: #FFFFFF; stroke-width: 10; fill: none; "/>
            </g>
        </defs>
        <use xlink:href="#img_star_active" filter="url(#colorScheme)"/>
        <use xlink:href="#img_star_inactive" transform="translate(100,0)" filter="url(#colorScheme)"/>
        <use xlink:href="#img_star_active" transform="translate(0,100)" />
        <use xlink:href="#img_star_inactive" transform="translate(100,100)"/>
    </svg>

参见

处的示例过滤器结果位于相对于源图形的边界框描述的边界框处,但在这种情况下,显然不包括笔划宽度。我必须承认,我不明白为什么会发生这种情况,但解决方法很简单:提高过滤区域的大小(1是边界框的宽度/高度):



谢谢!这很有魅力。(除了必须删除宽度和高度之间的逗号。)哎呀,这是从哪里来的?现在它很完美:)SVG在计算边界框时不包括笔划宽度
    <filter id="colorScheme" x="-0.2" y="-0.2" width="1.4" height="1.4">
        <feColorMatrix in="SourceGraphic" type="matrix" color-interpolation-filters="sRGB"  values="0.5 0.0   0.0   0.0 0.0 0.0   0.3 0.0   0.0 0.0 0.0   0.0   0.0   0.0 0.0 0.0   0.0   0.0   1.0 0.0"/>
    </filter>