Question

我花了太长时间试图解决这个问题...我有一个带有一些g元素和一个异物的svg。问题是，当g元素被翻译时，我在异物内的滚动条变得不可点击。（我正在使用Chrome，这是我需要开发的工具......虽然Firefox看起来工作得很好）

我在JSFiddle here中有一个例子。

如果删除第一个g元素中的transform =“translate（...）”，滚动条将变为可点击...但位置有点偏。您必须将几个像素悬停在滚动条或向上/向下箭头的顶部以与其进行交互。知道为什么transform = translate（）搞乱滚动条以及如何解决这个问题？

.content {
    width:100px;
    height:100px;
    font-size:1.5em;
    overflow : auto;
    background-color:yellow;
}

<svg width="1243" height="651">
    <g class="graph" transform="translate(200,20)scale(1)">
        <g class="output">
            <g class="nodes">
                <g class="node update" transform="translate(85.5,75.5)" style="opacity: 1; cursor: pointer;">
                    <g class="label" transform="translate(0,0)">
                        <g transform="translate(-75.5,-51.5)">
                            <foreignObject width="151" height="103">
                                <div class='content'>
                                    <p>a lot of text to enable overflow blah blah blah</p>
                                </div>
                            </foreignObject>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

为什么使用transform =“translate（x，y）”会使滚动条无法点击？

0 个答案: