Question

我已经做了一个例子来展示这个问题，这个问题出现在非最新版本的chrom（e / ium）中，并且仍然出现在最新版本的safari中。我试图在几个版本中完成它，结果仍然相同。我不能有一个负的Y值溢出svg元素（或svg元素的div父级），而没有溢出部分丢失任何悬停/单击操作。我也无法通过css变换（或元素上的变换attr）来实现它。

将鼠标悬停在safari或较旧的Chrome版本的svg rect对象的顶部以查看问题。我相信它是webkit中的一个bug，而safari可能还没有来自webkit的新变化。有办法解决这个bug吗？它似乎是在svg的对象溢出svg的情况下。

元素：

<div id="main">
<div></div>
<svg width="105" height="105">
    <g>
        <rect width="105" height="105"></rect>
    </g>
</svg>
</div>

CSS（来自第7版）：

#main, #main svg, #main svg g{
overflow:visible;
}
#main svg g{
transform:translate(0,-20px);
-webkit-transform: translate(0,-20px);
-webkit-transform-origin:50% 50%;

}

http://jsfiddle.net/c7p14x2w/1/

http://jsfiddle.net/c7p14x2w/2/

http://jsfiddle.net/c7p14x2w/3/

http://jsfiddle.net/c7p14x2w/4/

http://jsfiddle.net/c7p14x2w/7/

没有父元素的更简化版仍然不起作用： http://jsfiddle.net/Nu5m6/74/

某些版本的webkit中的溢出svg元素无法正常工作

0 个答案: