Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/32.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/6/google-chrome/4.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript:从SVG中选择自定义数据-*属性无效_Javascript_Css_Svg_Dataset_Getattribute - Fatal编程技术网

Javascript:从SVG中选择自定义数据-*属性无效

Javascript:从SVG中选择自定义数据-*属性无效,javascript,css,svg,dataset,getattribute,Javascript,Css,Svg,Dataset,Getattribute,试图从svg(我插入的)中获取自定义数据信息。我一直在使用本文中概述的方法:但我不确定哪里出了问题,因为当我尝试console.log数据属性(使用两种不同的方法)时,它返回null和undefined 让svgArray=[''”; 让gameTile=document.getElementById('gameTile'); gameTile.innerHTML=svgArray[0]; 让tileValue1=gameTile.getAttribute('data-number'); 让t

试图从svg(我插入的)中获取自定义数据信息。我一直在使用本文中概述的方法:但我不确定哪里出了问题,因为当我尝试console.log数据属性(使用两种不同的方法)时,它返回null和undefined

让svgArray=[''”;
让gameTile=document.getElementById('gameTile');
gameTile.innerHTML=svgArray[0];
让tileValue1=gameTile.getAttribute('data-number');
让tileValue2=gameTile.dataset.number;
//让tileValue3=SVGElement.dataset.number;
console.log(tileValue1);
控制台日志(tileValue2);
//控制台日志(tileValue3)
*{
保证金:0;
填充:0;
框大小:边框框;
}
.集装箱{
显示器:flex;
证明内容:中心;
对齐项目:居中;
背景:径向梯度(中心椭圆,#1d9325 0%,#17752d 57%,#013a01 100%);
}
.底层{
显示器:flex;
弯曲方向:立柱;
证明内容:中心;
对齐项目:居中;
宽度:100%;
高度:100vh;
}
.行{
显示器:flex;
弯曲方向:行;
}
.瓷砖{
高度:5.75雷姆;
宽度:4.5雷姆;
背景#f2f2;
边界半径:5px;
边框:实心rgb(59,59,59).2px;
显示器:flex;
证明内容:中心;
}
svg{
宽度:100%;
边框:纯紫色2件;
}
.selectableTile:悬停{
光标:指针;
-网络工具包盒阴影:0px 0px 12px 5px rgba(0,0,0,0.4);
盒影:0px 0px 12px 5px rgba(0,0,0,0.4);
}

您可以使用类似的方法

let gameTile2 = document.querySelector('#gameTile svg');

让svgArray=[''”;
让gameTile=document.getElementById('gameTile');
gameTile.innerHTML=svgArray[0];
让gameTile2=document.querySelector(“#gameTile svg”);
让tileValue1=gameTile2.getAttribute('data-number');
让tileValue2=gameTile2.dataset.number;
//让tileValue3=SVGElement.dataset.number;
console.log(tileValue1);
控制台日志(tileValue2);
//控制台日志(tileValue3);

data
属性不在
gameTile
元素上。您需要从SVG中的适当元素获取它。
gameTile.querySelector(“SVG”).dataset.number
非常感谢!
let svgArray = ['<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:number="http://www.myexample.com/whatever" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 50 50" xml:space="preserve" number:id="1" data-number="1"><g><path d="M58.639,18.646C58.639,11.109,49.93,5,49.93,5s-8.709,6.109-8.709,13.646s8.709,13.646,8.709,13.646   S58.639,26.183,58.639,18.646z M49.93,31.699c0,0-5.788-4.06-5.788-9.069c0-5.008,5.788-9.069,5.788-9.069s5.789,4.061,5.789,9.069   C55.719,27.639,49.93,31.699,49.93,31.699z"/><path d="M39.523,35.674c0,0,3.455-10.062-0.976-16.159c-4.43-6.098-15.067-5.921-15.067-5.921s-3.455,10.063,0.976,16.159   C28.885,35.851,39.523,35.674,39.523,35.674z M28.512,20.52c0,0,7.069-0.118,10.013,3.935c2.945,4.052,0.648,10.74,0.648,10.74   s-7.068,0.117-10.013-3.935C26.216,27.208,28.512,20.52,28.512,20.52z"/><path d="M24.456,70.246c-4.431,6.098-0.975,16.16-0.975,16.16s10.637,0.176,15.066-5.922c4.431-6.097,0.976-16.158,0.976-16.158   S28.885,64.148,24.456,70.246z M38.526,75.545c-2.944,4.052-10.014,3.936-10.014,3.936s-2.295-6.688,0.649-10.74   c2.943-4.053,10.013-3.934,10.013-3.934S41.47,71.492,38.526,75.545z"/><path d="M60.34,64.326c0,0-3.455,10.062,0.975,16.158c4.43,6.098,15.066,5.922,15.066,5.922s3.455-10.063-0.975-16.16   S60.34,64.326,60.34,64.326z M71.35,79.479c0,0-7.07,0.118-10.014-3.934c-2.945-4.052-0.648-10.74-0.648-10.74   s7.07-0.117,10.014,3.936C73.646,72.793,71.35,79.479,71.35,79.479z"/><path d="M82.441,51.405c-7.152-2.324-15.633,4.038-15.668,4.065c0.559-1.724,0.865-3.561,0.865-5.471   c0-9.779-7.928-17.708-17.708-17.708c-7.868,0-14.535,5.134-16.841,12.234c-0.01-0.03-3.13-10.173-10.286-12.498   c-7.168-2.33-15.67,4.066-15.67,4.066s3.119,10.171,10.287,12.5c7.156,2.326,15.642-4.045,15.668-4.064   c-0.56,1.723-0.865,3.561-0.865,5.471s0.306,3.747,0.865,5.471c-0.027-0.02-8.512-6.391-15.668-4.064   c-7.168,2.328-10.287,12.5-10.287,12.5s8.502,6.395,15.67,4.065c7.156-2.325,10.276-12.468,10.286-12.499   c2.306,7.101,8.972,12.235,16.841,12.235c-0.01,0.007-8.709,6.113-8.709,13.646C41.221,88.891,49.93,95,49.93,95   s8.71-6.109,8.71-13.646c0-7.532-8.7-13.639-8.709-13.646c7.868,0,14.536-5.134,16.842-12.234   c0.012,0.041,3.133,10.174,10.285,12.498c7.168,2.329,15.67-4.065,15.67-4.065S89.609,53.734,82.441,51.405z M22.112,47.047   c-4.763-1.548-6.837-8.307-6.837-8.307s5.65-4.25,10.415-2.703c4.763,1.547,6.835,8.308,6.835,8.308S26.875,48.595,22.112,47.047z    M25.69,63.963c-4.765,1.547-10.415-2.703-10.415-2.703s2.074-6.76,6.837-8.307c4.764-1.549,10.414,2.702,10.414,2.702   S30.453,62.415,25.69,63.963z M40.35,37.438c-0.273,1.076-0.726,3.602,0.499,5.286c1.591,2.189,5.41,2.126,5.41,2.126   s1.24-3.612-0.351-5.802c-1.223-1.685-3.764-2.035-4.871-2.108c2.428-1.657,5.343-2.651,8.485-2.73   c-0.875,0.738-2.65,2.485-2.65,4.525c0,2.706,3.128,4.899,3.128,4.899s3.126-2.193,3.126-4.899c0-2.036-1.77-3.781-2.645-4.521   c3.092,0.106,5.961,1.099,8.354,2.736c-1.164,0.091-3.566,0.476-4.744,2.099c-1.592,2.188-0.35,5.802-0.35,5.802   s3.818,0.063,5.41-2.126c1.174-1.617,0.805-4.01,0.531-5.15c2.301,1.809,4.09,4.24,5.105,7.045   c-1.008-0.615-3.152-1.688-5.041-1.074c-2.57,0.835-3.691,4.479-3.695,4.488c-0.828-2.553-3.225-4.398-6.052-4.398   c-2.828,0-5.225,1.846-6.054,4.398c-0.003-0.01-1.123-3.653-3.694-4.488c-2.01-0.654-4.307,0.602-5.218,1.184   C36.069,41.809,37.935,39.283,40.35,37.438z M55.311,50c0,2.933-2.377,5.31-5.31,5.31c-2.933,0-5.311-2.377-5.311-5.31   s2.378-5.311,5.311-5.311C52.934,44.689,55.311,47.067,55.311,50z M34.793,45.469c0.397,1.01,1.521,3.373,3.527,4.024   c2.57,0.835,5.617-1.454,5.626-1.46c-0.201,0.619-0.312,1.28-0.312,1.967s0.11,1.348,0.312,1.967   c-0.007-0.005-3.056-2.295-5.626-1.46c-2.007,0.651-3.13,3.015-3.527,4.024c-0.43-1.436-0.663-2.955-0.663-4.531   S34.364,46.904,34.793,45.469z M55.719,77.37c0,5.009-5.788,9.069-5.788,9.069s-5.789-4.061-5.789-9.07   c0-5.008,5.789-9.068,5.789-9.068S55.719,72.361,55.719,77.37z M59.684,62.426c0.273-1.141,0.643-3.533-0.531-5.15   c-1.592-2.189-5.41-2.126-5.41-2.126s-1.242,3.613,0.35,5.803c1.178,1.622,3.58,2.007,4.744,2.098   c-2.393,1.638-5.262,2.63-8.354,2.735c0.877-0.74,2.645-2.484,2.645-4.521c0-2.706-3.126-4.899-3.126-4.899s-3.128,2.193-3.128,4.9   c0,2.039,1.775,3.785,2.65,4.523c-3.143-0.08-6.058-1.073-8.485-2.73c1.107-0.072,3.648-0.424,4.872-2.107   c1.59-2.189,0.35-5.802,0.35-5.802s-3.819-0.063-5.41,2.126c-1.224,1.685-0.772,4.21-0.499,5.286   c-2.415-1.845-4.281-4.37-5.315-7.29c0.911,0.582,3.208,1.837,5.219,1.184c2.571-0.835,3.691-4.48,3.693-4.488   c0.829,2.553,3.226,4.398,6.054,4.398c2.828,0,5.224-1.846,6.052-4.398c0.004,0.008,1.123,3.653,3.695,4.488   c1.889,0.614,4.033-0.459,5.041-1.074C63.773,58.186,61.984,60.616,59.684,62.426z M65.125,54.33   c-0.457-1.093-1.561-3.211-3.445-3.823c-2.57-0.835-5.619,1.454-5.627,1.46c0.203-0.619,0.313-1.28,0.313-1.967   s-0.109-1.348-0.311-1.967c0.008,0.006,3.055,2.295,5.625,1.46c1.885-0.612,2.988-2.73,3.445-3.823   c0.393,1.376,0.605,2.828,0.605,4.33S65.518,52.953,65.125,54.33z M74.172,63.962c-4.764-1.547-6.836-8.308-6.836-8.308   s5.65-4.25,10.414-2.701c4.764,1.547,6.836,8.307,6.836,8.307S78.936,65.51,74.172,63.962z"/><path d="M66.91,44.945c0,0,8.502,6.395,15.67,4.066c7.168-2.329,10.287-12.5,10.287-12.5s-8.502-6.395-15.67-4.066   S66.91,44.945,66.91,44.945z M84.725,39.156c0,0-2.072,6.76-6.836,8.308c-4.766,1.549-10.414-2.702-10.414-2.702   s2.072-6.759,6.836-8.307C79.074,34.906,84.725,39.156,84.725,39.156z"/><path d="M75.764,30.009c4.43-6.097,0.975-16.159,0.975-16.159s-10.637-0.176-15.066,5.921S60.697,35.93,60.697,35.93   S71.334,36.106,75.764,30.009z M61.693,24.711c2.943-4.053,10.012-3.935,10.012-3.935s2.297,6.688-0.646,10.74c-2.945,4.053-10.014,3.935-10.014,3.935S58.748,28.763,61.693,24.711z"/></g></svg>'];
    let gameTile = document.getElementById('gameTile');
    gameTile.innerHTML = svgArray[0];
    let gameTile2 = document.querySelector('#gameTile svg');
    let tileValue1 = gameTile2.getAttribute('data-number');
    let tileValue2 = gameTile2.dataset.number;
//let tileValue3 = SVGElement.dataset.number;

    console.log(tileValue1);
    console.log(tileValue2);
//console.log(tileValue3);