SVG的marker-end显示不出来的问题

问题描述:
用d3画的图,svg和div重叠画的,svg画连线和箭头,div上用d3来append出个性化的展示面板,项目首页有 <base href="/">,d3生成的svg的标签文件单独复制出来后可以看到箭头(marker-end)!

解决方案

The HTML element is used to say “resolve all relative URLs relative not to this page, but to a new location”. In your case, you’ve told it to resolve relative to the directory with the HTML page.

The SVG marker-mid=”url(…)” attribute is a FuncIRI Reference. When you use a value like url(#foo) that relative IRI is normally resolved relative to the current page, finding the element with the foo id. But, when you use , you change where it looks.

To solve this problem, use a better value. Since your base reference is the current directory, you can simply use the name of the

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,关于绘制箭头,你可以使用SVG的`<marker>`元素来绘制,具体方法如下: 1.首先定义一个箭头的`<marker>`元素,例如: ``` <defs> <marker id="arrow" markerWidth="8" markerHeight="8" refX="4" refY="4" orient="auto"> <path d="M1,1 L7,4 L1,7 L4,4 Z" fill="#000000" /> </marker> </defs> ``` 其中`id`属性是用来标识这个箭头的,`markerWidth`和`markerHeight`是箭头的宽度和高度,`refX`和`refY`是箭头的参考,`orient`是箭头的方向。 2.在使用箭头的线段上添加`marker-end`属性,例如: ``` <line x1="10" y1="10" x2="50" y2="50" stroke="#000000" stroke-width="2" marker-end="url(#arrow)" /> ``` 其中`marker-end`属性的值是箭头的`id`值。 至于如何在箭头中添加文本并居中显示,你可以使用`<text>`元素在箭头的中心位置添加文本,例如: ``` <line x1="10" y1="10" x2="50" y2="50" stroke="#000000" stroke-width="2" marker-end="url(#arrow)" /> <text x="30" y="30" text-anchor="middle" dominant-baseline="middle">Hello World</text> ``` 其中`x`和`y`是文本的坐标,`text-anchor`是文本的水平对齐方式,`dominant-baseline`是文本的垂直对齐方式。 至于如何实现文本和箭头的线段之间间隔2px的效果,你可以使用`<rect>`元素在箭头中心位置添加一个透明的矩形,然后将文本放在矩形内部,例如: ``` <line x1="10" y1="10" x2="50" y2="50" stroke="#000000" stroke-width="2" marker-end="url(#arrow)" /> <rect x="28" y="28" width="4" height="4" fill="none" /> <text x="30" y="30" text-anchor="middle" dominant-baseline="middle" font-size="12">Hello World</text> ``` 其中`x`和`y`是矩形的左上角坐标,`width`和`height`是矩形的宽度和高度,`fill`属性设置为`none`表示矩形透明。同时,你可以通过调整矩形的大小和文本的字体大小来控制文本和箭头线段之间的间隔。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值