为了账号安全,请及时绑定邮箱和手机立即绑定

有没有办法在 HTML 中获取 SVG 的选定部分的值,与 PHP 一起使用

有没有办法在 HTML 中获取 SVG 的选定部分的值,与 PHP 一起使用

PHP
UYOU 2022-06-11 09:53:19
我是后端编程的新手,简而言之,我在一个问题网站工作该项目的要求是在第一页是一个带有国家地图的 SVG,然后根据选择的城市,该值要传递给数据库,在地图中选择的城市的值。对于后端,我使用的是 PHP,对于数据库 (PDO),<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <link rel="stylesheet" href="./styling/citystyle.css">    <title>City</title></head><body>    <div class="hero">        <h1 class="qytetText">Where are you from?</h1>        <div class="map-container">        <!-- form -->        <form action="info.php" method="GET">            <svg xmlns:mapsvg="http://mapsvg.com" xmlns:dc="http://purl.org/dc/elements/1.1/"                xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg"                xmlns="http://www.w3.org/2000/svg" mapsvg:geoViewBox="20.047065 43.270767 21.814280 41.83369"                width="612.56158" height="696.99365">                <path                    title="Pristina" id="XK-PR" onclick="addActive01()" value= "1" name="Prishtina"/>                <text x="60%" y="42.5%" stroke="#ffffff" stroke-width="1px" dy=".1em">Prishtina</text>                <path                    title="Kosovska Mitrovica" id="XK-KM" onclick="addActive02()" value= "2" name="Mitrovica"/>                <text x="40%" y="25%" stroke="#ffffff" stroke-width="1px" dy=".1em">Mitrovica</text>                <path                    title="Đakovica" id="XK-DA" onclick="addActive03()" value= "3" name="Gjakove"/>                <text x="17%" y="58%" stroke="#ffffff" stroke-width="1px" dy=".1em">Gjakovë</text>    </div></body>我尝试使用 js 获取值,然后尝试使用 $_POST 将其传递给 php,但它没有用,所以如果你们有任何提示,我将不胜感激谢谢,如果我不清楚我对不起,我也是 StackOverFlow 的新手
查看完整描述

2 回答

?
qq_花开花谢_0

TA贡献1835条经验 获得超7个赞

首先,不需要拥有所有这些 JS 函数。像这样创建一个函数。


function addActive(sender, value){


   let paths = document.getElementsByTagName('path');


   for(let i=0; i < paths.length; i++){

     paths[i].classList.remove("active");

   } 


   sender.classList.add('active');


   window.location='./info.php?v=' + value;

}

然后像这样使用函数,


onclick="addActive(this, 1)"

其中 1 是值。


该函数将首先通过删除活动类来停用所有路径,然后为所选路径添加活动类。


请注意,我尚未测试此代码,因此您可能需要进行一些更改。它也是一个 GET 请求。


查看完整回答
反对 回复 2022-06-11
?
慕容3067478

TA贡献1773条经验 获得超3个赞

我不确定您要做什么或如何传递给 PHP,但是使用



function addActive02() {

        console.log(document.getElementById("XK-KM"));


在浏览器的控制台中,我确实看到了


<path d="m 320.34271,73.9104 0.65,2.84 1.93,3.87 3.32,4.14 3.59,-2.49 2.2,-0.55 1.66,3.31 2.48,3.32 -1.65,3.86 0,2.21 -0.55,4.97 3.58,4.41 1.38,6.24 3.87,1.38 1.93,1.66 -0.83,4.97 1.93,3.58 4.15,1.38 2.48,1.11 2.21,5.24 6.07,16.29 0.28,6.9 -2.76,7.73 -0.56,8.56 -3.86,4.14 0,6.07 2.21,3.31 0.83,5.8 3.03,4.41 0.55,11.6 0.83,3.31 3.59,0.83 2.49,2.76 3.31,2.76 1.38,5.52 -1.11,5.24 -5.79,0.28 0,2.21 -2.49,0.55 -3.59,3.04 -2.48,3.03 -4.97,4.14 -0.27,3.04 2.2,1.1 2.21,1.66 -1.1,9.11 -3.04,0.55 -0.83,2.21 1.11,4.97 -3.04,1.65 -3.31,2.76 -3.87,2.21 -4.41,3.59 -3.31,3.59 -6.35,6.07 -3.59,0.28 -4.42,-5.25 -1.93,-3.86 -3.04,-2.49 -1.65,-4.14 -3.04,0 -3.86,2.49 -3.04,0.83 -5.24,0.27 -1.11,4.42 0,2.76 -5.8,4.14 -3.31,-1.1 -0.27,-3.32 -3.59,-2.48 -4.97,0 -2.76,1.93 -0.55,3.04 -4.97,0 -1.38,4.14 0.55,2.76 1.93,4.14 -1.65,3.31 -4.97,-0.28 -3.87,2.21 -3.86,1.11 -1.66,1.93 -1.38,5.52 -2.48,2.48 -0.55,3.87 2.2,3.31 0,2.21 -1.38,3.59 0.14,0.37 0,0 -1.24,0.12 0,0 -3.31,1.66 -2.21,-0.83 -1.38,-7.45 -5.24,-3.86 -2.76,-1.11 -5.53,-0.55 -1.65,-8.28 6.07,-4.42 -1.66,-4.97 -2.76,-1.65 2.21,-2.49 -3.86,-2.76 -0.83,-1.65 -2.48,1.1 -0.83,3.87 -3.04,3.03 -5.52,0.28 -2.76,-3.31 -4.69,-8.01 -0.83,-4.42 -1.66,-1.38 -3.86,-1.1 -0.55,-3.31 1.93,-4.14 2.21,-0.83 1.38,0.55 3.59,-4.14 1.65,-4.69 0.28,-4.14 -4.14,-3.59 -1.38,-5.52 1.65,-3.87 2.76,-4.96 0,-8.01 1.66,-2.76 1.93,-4.14 0.55,-8.28 -7.45,0 0.28,-6.35 -3.04,-4.42 -3.03,-1.65 -1.11,-3.59 -3.03,-3.04 -5.8,-0.55 -1.38,-4.14 -4.14,1.1 -2.76,2.21 -4.14,1.11 -5.52,0.55 -4.14,1.1 -3.11,0 0,0 3.01,-6.34 0.24,-2.87 -10.29,-12.82 -1.9,-3.81 -1.15,-3.35 -0.62,-5.52 1.56,-4.33 2.39,-3.97 3.08,-2.78 2.36,-0.99 1.52,-1.04 4.05,-1.98 4.78,-4.38 3.22,-3.45 7.1,-3.68 10.74,-2.83 2.63,-1.98 2.5,0.52 3.01,1.65 2.81,2.64 1.66,0.19 0.48,-0.38 -0.62,-5.9 20.06,-2.92 1.31,-3.68 -0.38,-10.2 -4.12,-8.84 -1.35,-8.88 0.86,-4.82 -0.69,-6.9 -0.83,-0.61 -0.9,0 -3.36,1.51 -1.18,0.23 -1.28,-0.85 -1.35,-2.31 -1.49,-4.54 -0.1,-2.27 0.27,-1.61 1.91,-4.26 0.45,-1.7 0.1,-1.56 -0.45,-3.5 -1.11,-2.18 -1.66,-1.89 -12.05,-11.07 -2.5,-4.31 1.04,-3.13 16.59,-4.11 10.22,-4.88 5.09,-3.74 10.5,-6.68 2.42,-0.9 6.07,-1.57 1.83,-1.3199998 8.66,-7.97 2.91,-1.37 3.64,-0.38 9.11,0.28 9.14,5.79 4.4,7.3899998 9.91,17.95 4.08,6.11 0.42,1.89 -0.63,2.75 -0.55,1.13 -2.08,0.1 -10.18,-4.31 -2.56,-0.29 -3.4,1 -3.57,3.22 1.25,8.94 1.14,2.18 2.08,2.98 3.22,3.45 3.36,2.22 9.25,2.09 6.82,4.58 z" title="Kosovska Mitrovica" id="XK-KM" onclick="addActive02()" value="2" name="Mitrovica" class="active"></path>

因此添加了 active 类,您可以毫无问题地选择 SVG,然后您的问题必须来自您如何在 PHP 中传递或操作数据。


另外作为旁注,您应该尽量不要重复相同的代码,例如,您可以在一个函数中执行所有这些函数正在执行的所有操作,例如,您将 svg ID 作为参数传递给该函数。


查看完整回答
反对 回复 2022-06-11
  • 2 回答
  • 0 关注
  • 153 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信