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

【问题标题】：Get pattern from d3 and set it like border of div从 d3 获取模式并将其设置为 div 的边框
【发布时间】：2019-02-04 13:55:06
【问题描述】：

我为 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);

并像 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获取pattern并在c3以外的其他地方使用？

【问题讨论】：

你解决了吗？
@ksav 我在 div 上用 svg 对象（如圆）替换了 div 的边框颜色，并使用了 url(#hatchId)
我的回答对解决这个问题有帮助吗？
@ksav 是的，我认为 :)

标签： javascript d3.js svg c3.js

【解决方案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>

【讨论】：