Javascript 如何使用d3用矩形遮罩svg图像？

我试图用灰色背景矩形遮罩svg图像，以便使用

d3.js

v5部分显示不同的颜色

SVG

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 53.545 53.545" style="enable-background:new 0 0 53.545 53.545;" xml:space="preserve">
<g>
    <g>
        <circle cx="26.686" cy="4.507" r="4.507"/>
        <path d="M28.256,11.163c-1.123-0.228-2.344-0.218-3.447,0.042c-7.493,0.878-9.926,9.551-9.239,16.164
            c0.298,2.859,4.805,2.889,4.504,0c-0.25-2.41-0.143-6.047,1.138-8.632c0,3.142,0,6.284,0,9.425c0,0.111,0.011,0.215,0.016,0.322
            c-0.003,0.051-0.015,0.094-0.015,0.146c0,7.479-0.013,14.955-0.322,22.428c-0.137,3.322,5.014,3.309,5.15,0
            c0.242-5.857,0.303-11.717,0.317-17.578c0.244,0.016,0.488,0.016,0.732,0.002c0.015,5.861,0.074,11.721,0.314,17.576
            c0.137,3.309,5.288,3.322,5.15,0c-0.309-7.473-0.32-14.949-0.32-22.428c0-0.232-0.031-0.443-0.078-0.646
            c-0.007-3.247-0.131-6.497-0.093-9.742c1.534,2.597,1.674,6.558,1.408,9.125c-0.302,2.887,4.206,2.858,4.504,0
            C38.678,20.617,36.128,11.719,28.256,11.163z"/>
    </g>
</g>
</svg>

我不知道为什么掩蔽在我的情况下不起作用。我想要的是使用掩蔽

rect

填充

SVG

图像，使其仅部分填充，具体取决于我提供的值，如10%、20%等。如何实现这一点

---

我想出来了。这是我做这件事的方式，但我相信还有更好的方式。任何帮助和修改都将不胜感激

this.maskHeight = (parseFloat(percentage) / 100 * parseFloat(this.mask.attr('height')));

    


    // add background which is clipped
    this.mask.append('rect')
      .attr('fill', '#fff')
      .attr('width', 65)
      .transition()
      .ease(d3.easeBounce)
      .duration(2000)
      .attr('height', this.maskHeight)


   
    d3.xml("../assets/images/person.svg")
      .then(xml => {

        var personFigure = xml.getElementsByTagName('g')[1];

        // adds person image to svg 
        that.svg.node().append(personFigure);

        // styling
        // person svg for the background
        that.svg.select('g')
          .attr('transform', `translate(${that.margin.left}, ${that.margin.top})`)
          .attr('class', 'person-svg-bg')

        var clone = that.svg
          .select('g').node()
          .cloneNode(true);

        that.svg.node().append(clone)

        var circle = that.svg.selectAll('circle')
          .attr('id', function (d, i) { return 'person-head-' + i })
          .style('fill', function (d, i) { if (i === 0) { return '#FFCC00' } else { return 'none' } })
          .style('stroke', function (d, i) { if (i === 0) { return null } else { return '#E7E7E7' } })
          .style('stroke-width', function (d, i) { if (i === 0) { return null } else { return 0.6 } })
          .attr('mask', function (d, i) { if (i === 0) { return 'url(#person-mask)' } else { return null } })

        var path = that.svg.selectAll('path')
          .attr('id', function (d, i) { return 'person-path-' + i })
          .style('fill', function (d, i) { if (i === 0) { return '#FFCC00' } else { return 'none' } })
          .style('stroke', function (d, i) { if (i === 0) { return null } else { return '#E7E7E7' } })
          .style('stroke-width', function (d, i) { if (i === 0) { return null } else { return 0.6 } })
          .attr('mask', function (d, i) { if (i === 0) { return 'url(#person-mask)' } else { return null } })

      });

---

你能创建可运行的代码吗？例如，在这里的代码片段中，或者在JSFIDLE或类似资源上？@Anton，我添加了FIDLE。谢谢你的建议。如果这个也有自己的jsfiddle=，那就太好了。我不能运行它。它表示未定义

百分比

。似乎只是代码的一部分。你能给我们一把小提琴吗？

this.maskHeight = (parseFloat(percentage) / 100 * parseFloat(this.mask.attr('height')));

    


    // add background which is clipped
    this.mask.append('rect')
      .attr('fill', '#fff')
      .attr('width', 65)
      .transition()
      .ease(d3.easeBounce)
      .duration(2000)
      .attr('height', this.maskHeight)


   
    d3.xml("../assets/images/person.svg")
      .then(xml => {

        var personFigure = xml.getElementsByTagName('g')[1];

        // adds person image to svg 
        that.svg.node().append(personFigure);

        // styling
        // person svg for the background
        that.svg.select('g')
          .attr('transform', `translate(${that.margin.left}, ${that.margin.top})`)
          .attr('class', 'person-svg-bg')

        var clone = that.svg
          .select('g').node()
          .cloneNode(true);

        that.svg.node().append(clone)

        var circle = that.svg.selectAll('circle')
          .attr('id', function (d, i) { return 'person-head-' + i })
          .style('fill', function (d, i) { if (i === 0) { return '#FFCC00' } else { return 'none' } })
          .style('stroke', function (d, i) { if (i === 0) { return null } else { return '#E7E7E7' } })
          .style('stroke-width', function (d, i) { if (i === 0) { return null } else { return 0.6 } })
          .attr('mask', function (d, i) { if (i === 0) { return 'url(#person-mask)' } else { return null } })

        var path = that.svg.selectAll('path')
          .attr('id', function (d, i) { return 'person-path-' + i })
          .style('fill', function (d, i) { if (i === 0) { return '#FFCC00' } else { return 'none' } })
          .style('stroke', function (d, i) { if (i === 0) { return null } else { return '#E7E7E7' } })
          .style('stroke-width', function (d, i) { if (i === 0) { return null } else { return 0.6 } })
          .attr('mask', function (d, i) { if (i === 0) { return 'url(#person-mask)' } else { return null } })

      });