Javascript jQM单页应用程序忽略SVG标记_Javascript_Jquery_Jquery Mobile_Svg_Marker

Javascript jQM单页应用程序忽略SVG标记

javascript jquery jquery-mobile svg

Javascript jQM单页应用程序忽略SVG标记,javascript,jquery,jquery-mobile,svg,marker,Javascript,Jquery,Jquery Mobile,Svg,Marker,我在组合SVG元素和jQM单页应用程序时遇到了一个问题。从jQM单页应用程序（index.html）的第一页开始，我可以用以下代码绘制一个箭头： <html> <head> <link rel="stylesheet" href="jQueryMobile/jquery.mobile-1.4.2.css" /> <link rel="stylesheet" href="themes/jquery.mobile.icons.min.css

我在组合SVG元素和jQM单页应用程序时遇到了一个问题。从jQM单页应用程序（index.html）的第一页开始，我可以用以下代码绘制一个箭头：

<html>
<head>
    <link rel="stylesheet" href="jQueryMobile/jquery.mobile-1.4.2.css" />
    <link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />

    <script type="text/javascript" src="jQueryMobile/jquery-2.1.1.js"></script>
    <script type="text/javascript" src="jQueryMobile/jquery.mobile-1.4.2.js"></script>
</head>
<body>
    <!--MainPage-->
    <div data-role="page" id="Index">
        <svg xmlns="http://www.w3.org/2000/svg"
             version="1.1"
             width="90%"
             style="margin: 1em;"
             viewBox="0 0 100 100"
             preserveAspectRatio="xMidYMid">
        <defs>
        <marker id="MyMarker" markerWidth="13" markerHeight="13" refx="2" refy="6"
                orient="auto">
            <path d="M2,2 L2,11 L10,6 L2,2" style="fill: black;" />
        </marker>
        </defs>

        <line x1="5" y1="5" x2="10" y2="10" stroke="black" stroke-width="1" style="marker-end: url(#MyMarker);"/>

        </svg>

    </div>
</body>

如预期的那样，直接打开页面会显示箭头

但是从index.html导航到此页面后，svg的标记不会显示，我不知道为什么。我测试了我发现的各种不同的组合和SVG标记示例，但通过jQM导航到第二个页面标记，似乎一个通常被忽略的问题

我找到了这个关于的链接。尝试了以下操作但未成功：

<line x1='5' y1='5' x2='20' y2='20' stroke='black' stroke-width='1' style='marker-end: url(#MyMarker2);'/>
<line x1='5' y1='5' x2='30' y2='20' stroke='black' stroke-width='1' style='marker-end: url(Test_de.html#MyMarker2);'/>
<line x1='5' y1='5' x2='20' y2='30' stroke='black' stroke-width='1' style='marker-end: url(content/Test_de.html#MyMarker2);'/>
<line x1='5' y1='5' x2='10' y2='20' stroke='black' stroke-width='1' style='marker-end: url(./content/Test_de.html#MyMarker2);'/>

还尝试使用完整路径以编程方式添加标记

在铬上测试。在开发人员工具中列出的计算属性中，它总是说marker end是none

我希望有人能帮忙。多谢各位

编辑：

对不起。我自己解决了这个问题。问题是页面转换的选项“changeHash:false”

<line x1='5' y1='5' x2='20' y2='20' stroke='black' stroke-width='1' style='marker-end: url(#MyMarker2);'/>
<line x1='5' y1='5' x2='30' y2='20' stroke='black' stroke-width='1' style='marker-end: url(Test_de.html#MyMarker2);'/>
<line x1='5' y1='5' x2='20' y2='30' stroke='black' stroke-width='1' style='marker-end: url(content/Test_de.html#MyMarker2);'/>
<line x1='5' y1='5' x2='10' y2='20' stroke='black' stroke-width='1' style='marker-end: url(./content/Test_de.html#MyMarker2);'/>