Question

我有一些本地图像，例如calendar.svg，我大约有10张SVG图片，我想将它们附加到某些圆圈的背景上。

有一种方法可以使用使用大量代码的模式！我想知道是否有一种快速简便的方法来只使用本地图像！

我的代码如下：

循环代码的前两个块是我对图像使用该方法附加模式，但是最后一个块是我试图实际上只是访问本地图像并使用它，但这是行不通的！

  circle
    .filter(node => node.depth !== 0 && node.type === EngagementType.Event)
    .append('circle')
    .classed('Engagement-GraphNode', true)
    .classed('Engagement-GraphNodeBackground', true)
    .classed('Engagement-GraphLeaf', node => node && (node.depth === 4 && !node.isExtraNode))
    .style('fill', d => `url(#insightImageEvents-${d.id})`)
    .style('opacity', node => (node.visible) ? 1 : 0)
    .style('visibility', node => (node.visible) ? 'visible' : 'hidden')
    .on('click', node => onClick(node));
  circle
    .filter(node => !node.parent)
    .append('circle')
    .classed('Engagement-GraphNode', true)
    .classed('Engagement-GraphNodeBackground', true)
    .classed('Engagement-GraphLeaf', node => node && (node.depth === 4 && !node.isExtraNode))
    .style('fill', node => 'white')
    .style('opacity', node => (node.visible) ? 1 : 0)
    .style('visibility', node => (node.visible) ? 'visible' : 'hidden')
    .on('click', node => onClick(node));
  circle
    .filter(node => node.name === 'Annual Meetings')
    .append("svg:image")
    .attr('width', 20)
    .attr('height', 24)
    .attr("xlink:href", "/calendar.svg") <---- trying
    // .classed('Engagement-GraphNode', true)
    // .classed('Engagement-GraphNodeBackground', true)
    // .classed('Engagement-GraphLeaf', node => node && (node.depth === 4 && !node.isExtraNode))
    // .style('fill', node => 'red')
    .style('opacity', node => (node.visible) ? 1 : 0)
    .style('visibility', node => (node.visible) ? 'visible' : 'hidden')
    .on('click', node => onClick(node));

任何帮助将不胜感激！

Answer 1

您可以使用图像遮罩来实现此目的，

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <defs>
        <mask id="image-mask">
            <circle id="outer" cx="50" cy="50" r="50" fill="white"/>
            <circle id="inner" cx="50" cy="50" r="25"/>
        </mask>
    </defs>
    <image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="https://images.unsplash.com/photo-1472195870936-d88b0d4c1b41?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=f1abbd4d59a9b448813cb48769806ada" mask="url(#image-mask)"></image>
</svg>

将图像设置为圆形背景

1 个答案: