首页 > 解决方案 > 用于边缘 / Internet Explorer 的 d3 svg 文本阴影

问题描述

您好,我想知道是否有一种可能的方法可以让文本阴影在 d3 旭日形图上与边缘/互联网浏览器一起使用。

我在文本代码中尝试过的事情是

filter: progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=45);

filter: dropshadow(color=#000000, offx=1, offy=1);

当添加到 css 或 attr 中时,它似乎根本不起作用

var texts = svg.selectAll("text")
    .data(partitioned_data)
    .enter().append("text")
    .filter(filter_min_arc_size_text)
    .attr("text-anchor", function (d) {
        return d.x + d.dx / 2 > Math.PI ? "end" : "start";
    })
    .attr("transform", function (d) {
        var angle = (d.x + d.dx / 2) * 180 / Math.PI - 90;
        var differenceSpacing = 0;
        if (angle > 90) { differenceSpacing = 1.41; }
        else { differenceSpacing = 1.39; }

        return "rotate(" + angle + ")translate(" + (d.y * differenceSpacing) + ")rotate(" + (angle > 90 ? -180 : 0) + ")"

    })
    .attr("dx", "1") // margin
    .attr("dy", ".35em") // vertical-align  
    .text(function (d, i) { return d.name })
    .attr("class", function (d) { if (d.depth === 3) { return "finalLayersText"; } else if (d.depth === 1) { return "beginningLayersText"; } else { return "middleLayersText"; } })
    .style("fill", "white")
    .style("font-family", "Arial")
    .style("font-size", "small")
    .style("color", "white")
    .style("text-shadow", "0 0 10px Black")
    .on("mouseover", mouseOverArc)
    .on("mousemove", mouseMoveArc)
    .on("mouseout", mouseOutArc);

所以我很好奇是否有一种方法可以在生成文本的 JavaScript 的一小部分中添加文本阴影。

谢谢

标签: javascriptcssinternet-explorerd3.jssvg

解决方案


推荐阅读