svg - 如何防止 SVG 标记(箭头)继承路径的笔画宽度?

标签 svg d3.js

我有不同边缘厚度的箭头,但是我希望箭头(svg 标记)具有相同的大小,即不根据路径的笔划宽度调整大小。我能做什么?

svg.append("svg:defs").selectAll("marker")
    .data(["suit", "licensing", "resolved"])
  .enter().append("svg:marker")
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
    .style("stroke-width", 1)
  .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

var path = svg.append("svg:g").selectAll("path")
    .data(force.links())
  .enter().append("svg:path")
    .attr("class", function(d) { return "aglink " + "suit"; })
    .attr("marker-end", function(d) { return "url(#" + "suit" + ")"; })
    .style("stroke-width", function(d) { if (d.total != 0) { 

        var min = 2;
        var max = 16;
        var val = Math.round((max-min)*(d.count/d.total))+min;

        return val ;
        } });

最佳答案

http://www.w3.org/TR/SVG11/painting.html#MarkerUnitsAttribute .

你似乎想要的是markerUnits="userSpaceOnUse" .

关于svg - 如何防止 SVG 标记(箭头)继承路径的笔画宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13626748/

相关文章:

css - 用于 Base64 的 sass 与 $var 混合

css - 有没有一种方法可以定位背景 SVG 特定元素以使用填充选项?

javascript - 使用 d3 选择 svg 子元素时遇到问题

javascript - 格式化线性刻度大数将G替换为B

javascript - 使用 D3 设置下拉菜单的默认选择

javascript - 我在 d3 中使用 scaleTime() 函数输入日期的方式有什么问题?

javascript - 如何自定义X轴的标签,即X轴的标签与数据不同

css - 将内联 SVG 与 CSS/Less 结合使用

当从服务器接收到 html 时,带有 svg 的 html img 标签看起来更小,而当我从文件系统打开 html 时,它看起来更大

JavaScript、SVG、HTML 和 CSS