Question

我在组合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>

用户可以通过以下方式导航到另一个页面（anotherpage.html）：$.mobile.changePage("content/anotherpage.html", { transition: "flow", changeHash: false });

anotherpage.html看起来像这样：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
    </head>
    <body>
        <div data-role="page" id="AnotherPage">    
            <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="MyMarker2" 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(#MyMarker2);"/>

            </svg>
        </div>
    </body>
</html>

直接打开页面会按预期显示箭头。

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

我找到了关于Using base tag on a page that contains...的链接。试过以下但没有成功：

<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);'/>

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

在Chrome上测试过它。它始终表示在开发人员工具中列出的计算属性上，marker-end为none。

我希望有人可以提供帮助。谢谢。

修改

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

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

0 个答案: