google-chrome - 在包含SVG标记元素的页上使用基标记无法呈现标记

  显示原文与译文双语对照的内容
0 0

我遇到了问题而试图使用SVG标记元素中基于SVG可视化。 我要把我变成Web应用而这刚好包含基础标记在每一页上,以便所有对CSS文件,java script文件等可以是相对路径。

我有一些示例代码下面可以重现问题。 有一个line元素,然后定义一个标记元素。 标记所引用的元素是/ / / / / 其标记结束属性,通过uri和标记的id 。 没有基础标记,箭头显示很好 与基础标记,则它不会显示。 原因是因为base标签可更改浏览器解析的url 。 即使是简单的基于id的url标记结束属性中指定的行。

我有什么办法可以避开这个问题,而不必删除基准标记?

恩,我不能删除它,因为它的使用相当深嵌在产品im上工作。 我要支持Firefox,chrome和IE9+为我的web app 。 firefox和chrome都产生此问题。 ie也能正常工作( ie 。 箭头标记显示) 。

帮忙大受赞赏。 thanx 。

<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>
时间:原作者:5个回答

0 0

在HTML <base>元素用于" 解决的所有相对url相对不适用于当前网页,但是说到新位置" 。 根据你的情况,你必须把它告诉解析相对于"Html页面所在目录。

" SVG marker-mid="url(…)"属性是一个 FuncIRI Reference 。 当你使用一个值,就像 url(#foo)解析相关IRI通常是相对于当前页面,查找元素之后 fooid 。 但是,当你使用 <base>,你将它从哪里看。

若要解决此问题,请使用更好的值。 鉴于你的基础参考是当前目录,则只需要使用当前文件的名称:

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

如果要使用不同的 <base>href,比你展现,比如:

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

那么你需要使用一个绝对href,e .g 。

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

如果不希望要修改/ svg的动画有一个更简单的方法逐个更改url( ) 参数。

将svg作为图像:

<img src="yourpath/image.svg">
原作者:
0 0

尝试使用java script :

<line id="something" />

与本机:

document.getElementById('something').setAttribute('marker-mid', 'url(' + location.href + '#arrow)');

jquery中的:

$('#something').attr('marker-mid', 'url(' + location.href + '#arrow)');

这种方法的确有效

原作者:
...