Question

我试图将背景图片添加到svg圈子。下面我展示了两个版本，但我注释掉了可行的部分。我尝试使用D3在页面上创建相同的元素。检查控制台时，圆圈svg显示但没有图像。

<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
   stroke: 1; 
}
</style>
<body>
    <script  type="text/javascript" src="d3.min.js"></script>
    <!--
    <svg height="500" width="800">
        <defs>
            <pattern id="apple" height="100%" width="100%" 
            patternContentUnits="objectBoundingBox">
                <image height="1" width="1" preserveAspectRation="none" 
                xlink:href="apple.jpeg"></image>
            </pattern>
        </defs>
        <circle cx="50" cy="50" r="40" fill="url(#apple)" />
    </svg>
    -->
    <script>
        // now trying to add same image inside a circle using D3
        var svg = d3.select("body")
            .append("svg")
            .attr("height",500)
            .attr("width",800);

        var defs = svg.append("defs")
            .append("pattern")
            .attr("id", "apple")
            .attr("height","100%")
            .attr("width", "100%")
            .attr("patternContenUnits", "objectBoundingBox")
            .append("image")
            .attr("height",1)
            .attr("width",1)
            .attr("preserveAspectRatio","none")
            .attr("xlink:href","apple.jpeg");

        var circle = svg.append("circle")
            .attr("cx",50)
            .attr("cy",50)
            .attr("r",40)
            .attr("fill","url(#apple)");
    </script>
</body>
</html>

使用D3将图像添加到svg圈

0 个答案: