javascript - 在 svg 内设置该 div 时，div 边框不起作用

Question

这是我的代码，

<div class="content-container-fluid">      
    <div class="row">                
        <div class="cols-sample-area" style="width: 100%;"> 
            <div id="scrollcontent" style="width:92% !important; transform: translate(0, 50%);">                  
                <div id="scrollcontenttemplate_group_" style="position: absolute;">
                    <div id="scrollcontentthumbleft" style="position: absolute; top: 42px; cursor: pointer; z-index: 1; left: 276.34375px;">
                        <div style="width:8px;height:36px;background-color: #41d335;border: 1px solid black;"></div>
                    </div>
                </div>
                <svg id="scrollcontent_svg" style="overflow:visible;position:relative" height="120" width="1188">
                    <g id="scrollcontenthigherLevel" style="cursor: pointer;">
                        <line x1="1" y1="0" x2="1" y2="21" stroke="black" stroke-width="1" stroke-dasharray="1 1 10"></line>
                    </g>
                </svg>
            </div>  
        </div>
    </div>
</div>

线条划线数组应用于该 div 吗？如何解决这个问题？

为什么边框显示成这样..如何解决？

Sample link

Answer 1

SVG 的破折号数组实际上并不影响 <div> 。这似乎是 Chrome 中的一个奇怪的渲染/合成异常。

您可以通过更改 dasharray 值来确认它不是 dasharray。 此外，如果您缩放页面(Ctrl-+)，“冲刺”就会消失。

我不知道原因是什么，但你可能想report the bug to Chrome .