我们如何根据矩形id填充rect中的背景图像?

时间:2018-04-12 08:08:56

标签: javascript jquery pdf d3.js svg

我是d3 js的新手,我想根据rect的id将背景图片填充到矩形。

以下是我的示例代码: -

<rect x="168.42105263157893" y="43.609022556390975" width="160" height="40" stroke="#f00" fill="url(#venus)" id="aeb3d127-946e-4e56-be45-38db260a81f7" data-pdf-annotate-type="stamp_button" aria-hidden="true" transform="scale(1.33) rotate(0) translate(0, 0)" pageNumber="1" class="pico" style="fill: rgb(243, 243, 243);"></rect>

var imgUrl = "http://localhost:4200/assets/icon-feature-1.png";

d3.selectAll("svg").append("defs") 
               .append("pattern")
               .attr("id", "venus")
               .attr('patternUnits', 'userSpaceOnUse')
               .attr("width", x)
               .attr("height", y)
               .append("image")
               .attr("xlink:href", imgUrl);

d3.selectAll("svg").select('rect[id="aeb3d127-946e-4e56-be45-38db260a81f7"]')
                   .attr('class', 'pico')
                   .attr('height', height)
                   .attr('width', width)
                   .attr('x', x)
                   .attr('y', y)
                   .attr("fill", "url(#venus)");

0 个答案:

没有答案