javascript - D3 : SVG Background: Blurry

Question

又一个脚本菜鸟在玩火:)

我有一个 SVG，我在其中附加了一个矩形。 该矩形有一个背景图像，该图像出现但很模糊(奇怪的是，在 IE 中比 Chrome 中更模糊)。

我尝试过不同的图像类型，但遇到了同样的问题。

知道如何防止图像模糊吗？

下面附有代码 - 我的 fiddle :- http://jsfiddle.net/FarinU/22jcj3vc/

        var spaceWidth = 600;
        var spaceHeight = 300;

        var myContainer = d3.select('#abc1')
            .append('svg')
            .attr('class', 'box')
            .attr('width', spaceWidth)
            .attr('height', spaceHeight);

        var pattern = myContainer.append("defs")
            .append("pattern")
            .attr("id", "bg")
            .attr("patternUnits", "userSpaceOnUser")
            .attr('width', "200px")
            .attr('height', "200px")
            .append("image")
            .attr("xlink:href", "http://www.bbc.co.uk/commissioning/images/img-bbc-one-logo-small.gif")
            .attr('width', "200px")
            .attr('height', "200px");

        var rectangle = myContainer.selectAll("rectangle")
            .data([{   }])
            .enter()
            .append('svg:rect')
            .attr("x", 10)
            .attr("y", 10)
            .attr("width", 300)
            .attr("height", 200)
            .style("fill", "url(#bg)")
            .style("stroke", "green")
            .style("stroke-width", "5");

谢谢。

Answer 1

您有一个拼写错误:它应该是“userSpaceOnUse”而不是“userSpaceOnUser”:

.attr("patternUnits", "userSpaceOnUse") // <---- delete last "r"

参见updated fiddle here .

请注意，您用于图案的图像只有 112 x 63 像素，而您将其拉伸(stretch)到 300 x 200 像素。结果，它看起来仍然有点模糊。如果将其缩小到 112 x 63 像素，它将变得非常清晰。