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

问题描述:
用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 current file:

<line … marker-mid="url(this_page_name.html#arrow)" />

If you have a different href, than what you’ve shown, like:

<base href="http://other.site.com/whee/" />

then you will need to use an absolute href, e.g.

<line … marker-mid="url(http://my.site.com/this_page_name.html#arrow)" />

如果用的Angular, 可以用$location.path!

目录
相关文章
leaflet之自定义marker Icon
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/82454606 leaflet之自...
3632 0
|
4月前
|
移动开发 前端开发 JavaScript
HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
52 3
|
定位技术
94Echarts - 地理坐标/地图(Use lines to draw 1 million ny streets.)
94Echarts - 地理坐标/地图(Use lines to draw 1 million ny streets.)
53 0
49Echarts - 柱状图(Mixed Line and Bar)
49Echarts - 柱状图(Mixed Line and Bar)
42 0
106Echarts - K 线图(Axis Pointer Link and Touch)
106Echarts - K 线图(Axis Pointer Link and Touch)
35 0
16Echarts - 折线图(Line Chart in Cartesian Coordinate System)
16Echarts - 折线图(Line Chart in Cartesian Coordinate System)
41 0
|
算法 定位技术
如何多添加几个Marker
如何多添加几个Marker
97 0
|
计算机视觉 Python Windows
OpenCV——line、circle、rectangle、ellipse、polylines函数的使用和绘制文本putText函数以及绘制中文的方法。
学习OpenCV的过程中,画图是不可避免的,本篇文章旨在介绍OpenCV中与画图相关的基础函数。
296 0
OpenCV——line、circle、rectangle、ellipse、polylines函数的使用和绘制文本putText函数以及绘制中文的方法。
|
存储
使用Dynamic Data Display控件绘图时无法删除已经画好的曲线
最近在使用Dynamic Data Display画图的时候发现,多次画图时,之前画的图无法清除,造成图像混乱。找了好久发现这样可以消除。 在调用AddLineGraph时,使用一个全局的变量来存储这个方法返回的对象(LineGraph), 点击...
920 0
【MATLAB】基本绘图 ( Marker 设置 | 设置 Marker 边框 | 设置 Marker 填充 )
【MATLAB】基本绘图 ( Marker 设置 | 设置 Marker 边框 | 设置 Marker 填充 )
1039 0
【MATLAB】基本绘图 ( Marker 设置 | 设置 Marker 边框 | 设置 Marker 填充 )