我有一个手风琴打开,单击向下/向上的插入符号按钮时关闭。在E11以外的所有浏览器上都能正常工作。
通过JS,我会在点击插入符号(如
)时更新SVG的xlink:href
属性
<svg xmlns="http://www.w3.org/2000/svg" class="accordion__trigger" viewBox="0 0 18 18"><path fill="currentColor" d="M 16.146 4.646 a 0.5 0.5 0 0 1 0.708 0.708 l -7.5 7.5 a 0.5 0.5 0 0 1" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/svg/sprite.svg#caret-up-1-18" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="accordion_trigger" viewBox="0 0 18 18"><path fill="currentColor" d="M 16.146 4.646 a 0.5 0.5 0 0 1 0.708 0.708 l -7.5 7.5 a 0.5 0.5 0 0 1" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/svg/sprite.svg#caret-down-1-18" /></svg>
仅检查href
已更新DOM,但未检查E11中的图像。
是因为带有散列标签的Sprite图片无法在E11中呈现吗?
不确定还是E11本身,或者仅需要更改E11的切换方法!
已编辑-
我们将Elm替换为SVG
arrowUp : List (Svg.Attribute a) -> Html a
arrowUp =
icon "arrow-up-18"
arrowDown : List (Svg.Attribute a) -> Html a
arrowDown =
icon "arrow-Down-18"
up : Html a
Up =
Icon.arrowUp iconAttributes
down : Html a
down =
Icon.arrowDown iconAttributes
triggertoggle : Tag -> a -> Header -> Html a -> Html a
triggertoggle tag msg header icon =
case header of
Simple title ->
trigger tag msg title [ icon ]
trigger tag msg title triggerChildren =
div [ Tags.taggedWith tag,class "accordion__trigger",onClick msg ]
open tag msg title children =
div [ class ("accordion accordion--open" ++ " " ++ mkClass title) ]
[ triggertoggle tag msg title up ]
SVG Sprite随页面加载一起加载,并且没有控制台错误。