Question

我正在尝试使用图案填充两个带有图像的圆圈 - 它应该完全适合圆圈内部。当我在Chrome，Firefox或Safari中打开此HTML时，这种方式效果很好（并且响应迅速）：

<script type="text/javascript" src="js/d3.v4.min.js"></script>
<script type='text/javascript'
src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'> 
</script>
</head>
<body>
<style>
.svg-container {
    display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* aspect ratio */
    vertical-align: top;
    overflow: hidden;
}

.svg-content-responsive {
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 0;
}
</style>
<div id="graph"></div>
<script type="text/javascript">

        box_width = 500;
        box_height = 700;
        rad = 30;

        var svg = d3.select("div#graph")
        .append("div").classed("svg-container", true)
        .append("svg")
        .attr("preserveAspectRatio", "xMinYMin meet").attr("viewBox","0 0 " + box_width + " " + box_height + "")
        .classed("svg-content-responsive", true);

        svg.append("defs");

        svg.select("defs")
        .append("svg:pattern")
        .attr('width', 1)
        .attr('height', 1)
        .attr("patternContentUnits", "objectBoundingBox")
        //.attr("contentUnits", "objectBoundingBox")
        .attr("id","test")
        .append("svg:image")
        .attr('width', 1)
        .attr('height', 1)
        .attr("xlink:href", "img/dna.png");

        svg.select("defs")
        .append("svg:pattern")
        .attr('width', 1)
        .attr('height', 1)
        .attr("patternContentUnits", "objectBoundingBox")
        //.attr("contentUnits", "objectBoundingBox")
        .attr("id","legend_test")
        .append("svg:image")
        .attr('width', 1)
        .attr('height', 1)
        .attr("xlink:href", "img/dna.png");

        d3.select("svg")
        .append("circle")
        .attr("cx", 50)
        .attr("cy", 50)
        .attr("r", rad)
        .attr("stroke", "black")
        .attr("fill", "url(#test)");

        d3.select("svg")
        .append("circle")
        .attr("cx", 100)
        .attr("cy", 100)
        .attr("r", rad / 2)
        .attr("stroke", "black")
        .attr("fill", "url(#legend_test)");
</script>

当我在WebView中加载此页面时，它不起作用：

public void start(Stage stage) throws MalformedURLException {       
    WebView view = new WebView();
    engine = view.getEngine();

    // load test html
    URL html = getClass().getResource("/index.html");
    engine.load(html.toExternalForm());

    // create and show the scene
    final int sceneWidth = 800;
    final int sceneHeight = 400;
    scene = new Scene(view, sceneWidth, sceneHeight);
    stage.setScene(scene);
    stage.show();
}

根据我所做的更改（我尝试了patternContentUnits和ContentUnits设置的各种组合）我要么根本看不到任何图像，要么在更改WebView时不会完全填充圆圈/不做出反应大小

我做错了什么？

使用D3在JavaFX WebView中使用图像填充形状

0 个答案: