小编Flu*_*nch的帖子

键盘可访问的标记与谷歌地图js api

根据WCAG和第508节,网站上的所有信息必须只能使用键盘访问.

我有一个带有一些标记的谷歌地图,打开一个带有专用信息的模态.

问题是带有谷歌地图js API的标记对于键盘是不可见的,并且无法使用TAB键进行聚焦.因此键盘用户无法访问标记背后的内容.

有没有解决的办法？我没有在API文档中找到任何内容,也没有提到标记的"焦点".

欢迎任何解决方案.

google-maps accessibility section508 google-maps-api-3 wcag2.0

Flu*_*nch

lucky-day

5
推荐指数

1
解决办法

938
查看次数

使用SVG过滤器创建内部笔触

我想在svg路径上进行模拟和“内部笔划”。我有一个svg贴图，其中包含多个复杂路径（国家/地区），每个路径具有不同的填充色描边。我想在第一个中添加“假内笔画”。我设法用内阴影技巧（带有高斯模糊滤镜）完成了一些工作，但无法将其作为“非模糊”处理。

理想的解决方案是使用svg过滤器，因此我可以通过JS动态应用它，而无需更改路径或操纵dom。

非常感谢！编辑1：到目前为止，我已经尝试过此技巧，但假阴影有时会在笔画上模糊不清，因此我不确定这是否是最好的方法...

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="150" height="150" style="transform:scale(2);transform-origin:0 0 ">
     <defs>
  <filter id='inset' x='-50%' y='-50%' width='200%' height='200%'>
  
    <feFlood fill-color="black"/>
    <feComposite in2="SourceAlpha" operator="out"/>
    
    <feGaussianBlur stdDeviation='10' edgeMode="none" />
    <feOffset dx='0' dy='0' result='offsetblur'/>
    <feFlood flood-color='#00ff00' result='color'/>
    <feComposite in2='offsetblur' operator='in'/>
    <feComposite in2='SourceAlpha' operator='in' />
    <feMerge>
      <feMergeNode in='SourceGraphic'/>
        <feMergeNode/>
    </feMerge>
  </filter> 
       
	</defs>
  
<path class="st0" d="M144.7,126.2l-2.8,8.8l-3.9-2.3l-2-7.7l1.7-4.3l5.5-4.4L144.7,126.2z M93.5,24.2l6,6.3l4.4-1l7.5,6l1.9,1.1
	l2.5-0.3l4,3.4l12.3,2.4l-4.3,8.9l-1.1,9.1l-2.4,2.2l-3.9-1.2l0.3,3.2l-6.3,7l-0.1,5.6l4.1-1.9l2.9,5.4L121,84l2.5,4.6l-3,3.7
	l2.2,9.3l4.6,1.5l-1,5.1l-7.8,6.6l-16.9-3.2l-12.5,3.8l-1,7l-9.9,1.5l-9.6-5.3l-3.1,2.5l-15.8-5.3l-3.4-4.6l4.4-7.1l1.6-24.1
	l-8.8-13l-6.3-6.4l-13.1-4.9l-0.9-9.4l11.1-2.8L48.9,47l-2.7-14.8l8.1,5.7l20-10.3l2.6-11l7.5-2.8l1.3,4.8l4,0.2L93.5,24.2z" stroke-width="1" fill="#00ffff"  stroke="#FF0000" filter="url(#inset)"/>
</svg>

Run Code Online (Sandbox Code Playgroud)

svg stroke svg-filters

Flu*_*nch

2017 02-25

4
推荐指数

2
解决办法

2545
查看次数