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 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!

时间: 2024-09-15 10:45:54

SVG的marker-end显示不出来的问题的相关文章

Android加载html中svg格式图片进行显示

最近做的一个项目是把assets目录中的html显示出来,但是因为html里面有一些工程图片,虽然我用ViewPager和PhotoView,进行显示放大了,但是因为工程图片的线条较多还是比较模糊.所以后来就想用svg图片来进行显示,至于svg是什么,我这里就不做多的说明,可以去网上搜一搜看看.因为svg和png jpg是不同的,没办法用glide(我图片加载框架用的是glide)进行加载,所以我就只能另想办法了,最后找到一个开源库,解决了我的问题,下面我也是用开源库做的,但是有几个坑需要注意:

javascript-google map marker显示问题

问题描述 google map marker显示问题 40C 最近在研究google map api,但为什么现在添加的marker无法显示了呢,请大侠指点,代码如下:<!DOCTYPE html> Google Maps JavaScript API v3 Example: Image MapTypes function tlen(len mystr){ mystr = String(mystr); var num = len - mystr.length; for (var i = 0;

用SVG技术实现基于Web的GIS

web 引言 SVG(Scalable Vector Graphics)是一种基于XML 的用来描述二维矢量图形和矢量/点阵混合图形的置标语言,是一种全新的矢量图形规范. SVG规范定义了SVG的特征.语法和显示效果,包括模块化的XML命名空间(namespace)和SVG文档对象模型(DOM). SVG的绘图可以通过动态和交互式方式进行,在实际操作中,则是以嵌入方式或脚本方式来实现的.SVG不仅提供超链接功能,还定义了丰富的事件.由于SVG支持脚本语言(script),可以通过Script编程

实现跨浏览器的图标SVG Sprites的教程

基于本文的目的,我会以一个像个人名片的东西来开始.它会简短地介绍一下我自己以及显示3个和我工作相关的网络档案. 从上面的截图你可以看到我使用了三个图标(Twitter,Dribble 和 Github)象征着我的网络档案.这些图标我是从 flaticon 下载到的,这是一个具有各种不同图标和符号的网站,并且每个图标都提供矢量和光栅格式. PNG 和 SVG 我们会在支持SVG的浏览器中使用SVG的格式,然后在不支持svg的浏览器中使用PNG格式的图标. 通常我使用Sketch来输出我的PNG图标

HTML5 学习总结(四)——canvas绘图、WebGL、SVG

一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 SVG以及 VML 之间的一个重要的不同是,<canvas> 有一个基于 JavaScript 的绘图 API,而 SVG 和 VML 使用一个 XML 文档来描述绘图.SVG 绘图很容易编辑与生成,但功能明显要弱一些. canvas可以完成动画.游戏.图表.图像处理等原来需要Flash完成的一

Android把svg图片转为jpg保存到相册图库

我上一篇文章写了<Android加载html中的svg格式图片进行显示〉,有兴趣的同学可以去看看地址:Android加载html中svg格式图片进行显示 但是我们一般在浏览图片时,还会有保存图片到相册或图库的操作,而Android手机自带的相册或图库是不支持查看svg格式的图片的,所以我们需要把svg格式的图片转为jpg或png格式再进行保存,我的例子是保存为jpg格式,png也是一样的,我这里写了个工具类,可以保存jpg,png格式的图片,也可以把svg图片转为jpg进行保存.接下来我贴下我的

Symbian学习笔记(8)——再尝试着做一个数独游戏

仍是做一个同样界面同样功能的数独游戏,但是所花费的时间远远超出我用Android或者J2ME来做同样的事情,当然运行效率也很明显(我将J2ME实现的数独放在N73上跑过,因为重绘屏幕的代码没有优化,所以效果不好,但同样的算法在BREW或者Symbian上就跑得相当顺畅). 这次我主要谈谈在做这个 Symbian版本中遇到的几个问题,希望以后自己不要再犯同样的错误了. 1.多视图的应用程序框架的问题 我用的是Carbide C++ IDE环境,不知道为什么不能生成多视图的架子,所以只能在Hello

史上最全的iOS开源项目分类汇总

楼主转载的,并未亲自测试 Category/Util  sstoolkit 一套Category类型的库,附带很多自定义控件 功能不错-        BFKit 又一套Category类型的 Kit,还有几个工具类        APUtils 又一套Category类型的 Kit        QSKit 又一套Category类型的 Kit        iOS-Categories 又一套Category类型的 Kit        BlocksKit 将Block风格带入UIKit和F

基于GMap.Net的地图解决方案

一 地图的加载与显示 关于GMap的介绍与使用可以看我以前的文章: GMap.Net开发之在WinForm和WPF中使用GMap.Net地图插件 GMap.Net是.Net下一个地图控件,可以基于Http协议加载各个公司的地图,如Google,Bing,ArcGIS的,主要原理是通过解析各个公司的地图服务的URL,传入相应的参数得到对应的切片底图(Tiled map),如一个高德地图的GMapProvider的实现如下: using System; using GMap.NET; using G

Android 百度地图周边雷达(v6.1.3)及覆盖物

闲聊百度地图SDK 百度地图API是为开发者免费提供的一套基于百度地图服务的应用接口,包括JavaScript API.Web服务API.Android SDK.iOS SDK.定位SDK.车联网API.LBS云等多种开发工具与服务,提供基本地图展现.搜索.定位.逆/地理编码.路线规划.LBS云存储与检索等功能,适用于PC端.移动端.服务器等多种设备,多种操作系统下的地图应用开发.百度地图已经容纳了超过500万生活服务类数据,60余家数据合作伙伴与之进行深度合作,日均定位请求超过35亿次. 很久