Question

我想在鼠标单击后获取svg元素的id并使用PHP脚本处理它。 这需要在不使用javascript的情况下完成。 html页面包含内联svg。

在下面的示例中，我想使用POST方法用鼠标单击时获取circle元素（#mycircle）的ID。然后使用PHP脚本处理它，其值为$ _POST [＆＃39; mycircle＆＃39;]。

例如（为简洁起见，可能不是有效的svg或html代码）：

<html>
    <head>
        <title>SVG_id to PHP</title>
    </head>
    <body>
        <div class="container">
            <svg>
                 <symbol id=colony_circle><circle cx=10 cy=10 r=4 /></symbol>
                 <use xlink:href=#colony_circle id="mycircle" x="10" y="10"/>
            </svg>
       </div>
    </body>
</html>

Answer 1

使用svg的 foreignObject 元素并将其精确定位在所需的svg元素之上（例如：circle）。单击圆圈时，将激活提交按钮。 svg_action.php处理它并打印隐藏输入类型的值。

svg_view.php文件：

<?php
echo "<svg id=svg1 version=1.1";
echo " xmlns=http://www.w3.org/2000/svg";
echo " xmlns:xlink=http://www.w3.org/1999/xlink";
echo "x='0px' y='0px'";
echo " viewBox='0 0 400 160'";
echo "enable-background='new 0 0 400 160'";
echo " xml:space=preserve>";
?>
<circle cx="60" cy="80" r="30" fill="#00ff00" fill-opacity="0.5" />
<foreignObject x="32" y="53" width="200" height="150">
<body xmlns="http://www.w3.org/1999/xhtml">
    <form method=post action="svg_action.php">
        <input type="hidden" name="hidden" value="circleXYZ" /> 
        <input type="submit" style="background-color: #00ff00; width: 55; height: 55; border-radius: 50%;" value="" />
    </form>
</body>
</foreignObject>

</svg>

svg_action.php文件：

<?php
var_dump($_POST['hidden']);
?>

可能有一种更好的方法可以在没有javascript的情况下解决它！

使用POST方法单击鼠标后获取SVG元素的ID，并使用PHP进行处理

1 个答案: