相关疑难解决方法(0)

在过去,我回答了一个关于"谁错"的问题,关于SVG图像没有overflow: hidden在IE9中"裁剪"(),其他所有支持浏览器都这样做.答案就在这里.

今天,在重新审阅HTML5 Boilerplate时,我注意到他们声称他们"使用这段代码"[正确]溢出而不是隐藏在IE9中":

svg:not(:root) { overflow: hidden; }

我正在寻找某人通过指向HTML5或SVG规范中的其他注释来确认或否认我的原始研究.我找不到任何东西,但我想确定我没有错过任何东西.

我能找到的最好的是他们试图在这里应用规则7 ,但这应该仅适用于SVG文档,例如通过img标签或直接加载.

我在d3中创建了一个散点图.问题是y轴标签没有出现在firefox和chrome中(在IE中工作正常).我已经尝试过做svg宽度100%的事情,但由于某种原因,标签总是被切断.

<div id="TimeSeriesChartDiv" style="display: inline; float: right; width: 650px;
                            height: 415px">
                        </div>

 //Width and height
        var w = 600;
        var h = 300;
        var padding = 30;
        var margin = { top: 20, right: 20, bottom: 30, left: 20 };
        var df = d3.time.format("%b-%y");


        //Create scale functions
        var xScale = d3.time.scale()
                            .domain([d3.min(dataset, function (d) { return d[0]; }), d3.max(dataset, function (d) { return d[0]; })])
                            .range([padding, w - padding * 2])
                            .nice(5);

        var yScale = d3.scale.linear()
                             .domain([0, d3.max(dataset, function (d) …

我正在尝试overflow: visible在SVG上使用该属性.

它显示得很好,但是有一个问题:当我尝试将事件放在SVG之外的元素上时,它不起作用.这就像svg元素落后于其他元素.我试过玩,z-index但它不起作用.我更愿意不使用该viewBox答案溢出:在SVG上可见.

这是代码:

HTML

<p>Blabla</p>

<svg width="100" height='100'>
    <circle id='c1' cx='10px' cy='-10px' r='5' onclick='alert("c1")'></circle>
    <circle id='c2' cx='10px' cy='10px' r='5' onclick='alert("c2")'></circle>
</svg>

CSS

svg {
    overflow: visible;
}

circle {
    fill: black;
}

circle:hover {
    fill: red;
}

这是jsfiddle

当我点击溢出SVG的第一个圆圈时,它没有显示警报.但对于那个,它在SVG内部是有效的.

问题似乎只出现在Chrome中.在Firefox和IE上,它正在运行.