尝试在基于SVG的可视化中使用SVG标记元素时遇到了问题.我正在将我的更改添加到Web应用程序中,该应用程序恰好在每个页面上都包含一个基本标记,因此对CSS文件,javascript文件等的任何引用都可以是相对的.
我在下面有一些示例代码可以重现该问题.有一个line元素,并定义了一个标记元素.标记元素由其"marker-end"属性中的行引用,通过uri和id of marker.没有基本标签,箭头显示正常.使用基本标记时,未显示.原因是因为基本标记改变了浏览器解析URL的方式..即使是在行的marker-end属性中指定的基于简单id的url.
有没有办法解决这个问题而不必删除基本标签？
我无法真正删除它,因为它的使用在我正在研究的产品中相当根深蒂固.我需要为我的webapp支持Firefox,Chrome和IE9 +.Firefox和Chrome都会产生这个问题.IE工作正常(即箭头标记显示).
<html>
<head>
<base href=".">
<style>
.link { stroke: #999; stroke-opacity: .6; }
marker#arrow { fill: black; }
</style>
</head>
<body>
<svg width="100%" height="100%">
<defs>
<marker id="arrow" viewBox="0 -5 10 10" refX="0" refY="0" markerWidth="20" markerHeight="20" orient="auto">
<path d="M0,-5L10,0L0,5"></path>
</marker>
</defs>
<line x1="100" y1="100" x2="333" y2="333" marker-start="url(#arrow)" class="link"></line>
</svg>
</body>
</html>
在我的网站内,我正在嵌入一些svgs.它们似乎在Chrome,Firefox,IE(9+)和Safari中都运行良好.一旦svg中包含图像,safari就不会渲染图像.
基于之前的类似主题,我尝试了以下内容:
<use>
像这样的标签 <use></use>
SVG图像不会出现在Safari中 - 我没有发现这非常有用,因为这是删除svg的aprt.
无法在Safari中渲染SVG图像 - 已添加
<meta http-equiv="Content-Type" content="application/xhtml+xml"> 在标题中.
除此之外,我真的不知道还有什么可以尝试.也许还有一点需要注意的是,在我的页面中,图像没有显示,但我可以在safari中打开svg文件(只是文件),它将被正确渲染.此外,在浏览器中将其作为文件打开后,它也会在页面内部呈现.我将svg嵌入到带有img标签的页面中.
<img src="mysvg.svg" class="center-block"/>
这是我的svg:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="328px" height="328px" viewBox="0 0 328 328" enable-background="new 0 0 328 328" xml:space="preserve">
<g>
<defs>
<polygon id="SVGID_1_" points="1.414,164.001 164,326.586 326.586,164.001 164,1.414 "/>
</defs>
<clipPath id="SVGID_2_"> …