从 d3 获取模式并将其设置为 div 的边框

Question

我为 d3 创建了一个模式：

d3.select('defs')
    .append('pattern')
    .attr('id', hatchId)
    .attr('width', 14)
    .attr('height', 14)
    .attr('patternUnits', 'userSpaceOnUse')
    .attr('patternTransform', 'rotate(45 0 0 )')
    .attr('fill', color)
    .append('rect')
    .attr('height', 14)
    .attr('width', 14);
d3.select(hatchId)
     .append('line')
     .attr('y2', 14)
     .attr('opacity', '0.3')
     .style('stroke', '#fff')
     .attr('stroke-width', 6);

和return它喜欢c3.js选项中的颜色：

data: {
            type: 'bar',
            columns: [],
            types: {},
            axes: {},
            classes: {},
            color: function (color, d) {
                .....
                return `url(#${hatchId})`;
            },
        },

看起来像这样

但我需要添加具有这种模式的元素 - 例如，带边框的图例

我尝试创建：

`<div style="border-color: url(#${hatchId});">Name</div>`

未找到模式

是否可以从 d3 获取模式并在 c3 以外的其他地方使用它？

Answer 1

是的，这是可能的。

d3 创建的 pattern 只是普通的 SVG。您可以将其作为填充或描边应用于 SVG 形状，但不能将其应用于 HTML。

<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="star" viewBox="0,0,10,10" width="5%" height="5%">
      <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/>
    </pattern>
  </defs>
  <circle cx="50"  cy="50" r="50" fill="url(#star)"/>
  <rect x="120"  width="100" height="100" fill="none" stroke-width="6" stroke="url(#star)"/>
</svg>

从 d3 获取模式并将其设置为 div 的边框

Get pattern from d3 and set it like border of div

javascript

svg

d3.js

c3.js