Question

我试图仅使用SVG过滤器在三面（顶部，左侧和右侧）获得插入阴影。请参阅下面的代码，它会在所有四个面上添加内嵌阴影，看看你是否可以帮我修改它以仅在三面获得阴影。谢谢！

＆＃13;

        <svg>
        <filter id="inset-shadow" x="-50%" y="-1" width="200%" height="205%">
         <feComponentTransfer in=SourceAlpha>
              <feFuncA type="table" tableValues="1 0 0 0 0 0 0" />
            </feComponentTransfer>
            <feGaussianBlur stdDeviation="5"/>
            <feOffset dx="0" dy="0" result="offsetblur"/>
            <feFlood flood-opacity="0.9" flood-color="rgb(20, 0, 0)" result="color"/>
            <feComposite in2="offsetblur" operator="in"/>
            <feComposite in2="SourceAlpha" operator="in"/>
            <feMerge>
              <feMergeNode in="SourceGraphic" />
              <feMergeNode />
            </feMerge>    
        </filter>
        <filter id="inset-shadow1" x="-50%" y="0" width="200%" height="200%">
         <feComponentTransfer in=SourceAlpha>
              <feFuncA type="table" tableValues="1 0" />
            </feComponentTransfer>
            <feGaussianBlur stdDeviation="5"/>
            <feOffset dx="0" dy="-1" result="offsetblur"/>
            <feFlood flood-color="rgb(20, 0, 0)" result="color"/>
            <feComposite in2="offsetblur" operator="in"/>
            <feComposite in2="SourceAlpha" operator="in" />
            <feMerge>
              <feMergeNode in="SourceGraphic" />
              <feMergeNode />
            </feMerge>          
        </filter>
       </svg>

＆＃13;

Answer 1

只需调整滤镜区域坐标，使它们与源图形的左边缘或顶边缘对齐，然后调整宽度/高度，使它们不会剪切右边/底边。像这样：

var string = 'UserYou.LoadContexts( g_rgAppContextData );'+
'BuildHover( "lesson_51123",  {"id":"123441","class":"51112","student":"506854340"} );'+
    '$("lesson_51123").show();';

var jsonString = string.match(/\{"id":.*?\}/);
var jsonObject = JSON.parse(jsonString);

console.log(jsonObject.id);
console.log(jsonObject.class);
console.log(jsonObject.student);

仅在3面SVG上插入阴影

1 个答案: