分类导航
程序笔记程序问答

Javascript：从 SVG 中选择自定义 data-* 属性不起作用

程序问答   发布时间：2022-06-01  发布网站：大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Javascript：从 SVG 中选择自定义 data-* 属性不起作用，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决Javascript：从 SVG 中选择自定义 data-* 属性不起作用？

开发过程中遇到Javascript：从 SVG 中选择自定义 data-* 属性不起作用的问题如何解决？下面主要结合日常开发的经验，给出你关于Javascript：从 SVG 中选择自定义 data-* 属性不起作用的解决方法建议，希望对你解决Javascript：从 SVG 中选择自定义 data-* 属性不起作用有所启发或帮助；

尝试从 svg（我已插入）获取自定义数据信息。我一直在使用这篇文章中概述的方法：How to add a data-* attribute to svg on or after creation 但我不确定我哪里出错了，因为当我尝试 console.log 数据属性（使用两种不同的方法）时，它返回 null 和未定义。

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,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,31.699,31.699z"/><path d="M39.523,35.674c0,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,35.674z M28.512,20.52c0,7.069-0.118,10.013,3.935c2.945,4.052,0.648,10.74,10.74   s-7.068,0.117-10.013-3.935C26.216,27.208,28.512,20.52,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,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,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,95,95   s8.71-6.109,8.71-13.646c0-7.532-8.7-13.639-8.709-13.646c7.868,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,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,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,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,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,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,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,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,6.836,8.307,8.307S78.936,65.51,74.172,63.962z"/><path d="M66.91,44.945c0,8.502,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,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 tileValue1 = gameTile.getAttribute('data-number');
let tileValue2 = gameTile.dataset.number;
//let tileValue3 = SVGElement.dataset.number;

console.log(tileValue1);
console.log(tileValue2);
//console.log(tileValue3);
*{
  margin:0;
  padding:0;
  Box-sizing:border-Box;
}

.container {
  display:flex;
  justify-content:center;
  align-items:center;
  BACkground: radial-gradIEnt(ellipse at center,#1d9325 0%,#17752d 57%,#013a01 100%);
}

.bottomLayer{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    wIDth:100%;
    height:100vh;
}

.row{
    display:flex;
    flex-direction: row;
  
}
.tile{
    height:5.75rem;
    wIDth: 4.5rem;
    BACkground: #f2f2f2;
    border-radius: 5px;
    border: solID rgb(59,59,59) .2px;
    display:flex;
    justify-content:center;
}

svg {
  wIDth:100%;
  border:solID purple 2px;
}

.SELEctableTile:hover{
    cursor: pointer;
    -webkit-Box-shadow: 0px 0px 12px 5px rgba(0,0.4); 
    Box-shadow: 0px 0px 12px 5px rgba(0,0.4);
}
<div class="container">
   <div class="bottomLayer">
      <div class="tile one SELEctableTile" ID="gameTile"></div>
    </div>
</div>

解决方法

你可以使用这样的东西

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

.

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,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,31.699,31.699z"/><path d="M39.523,35.674c0,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,35.674z M28.512,20.52c0,7.069-0.118,10.013,3.935c2.945,4.052,0.648,10.74,10.74   s-7.068,0.117-10.013-3.935C26.216,27.208,28.512,20.52,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,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,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,95,95   s8.71-6.109,8.71-13.646c0-7.532-8.7-13.639-8.709-13.646c7.868,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,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,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,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,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,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,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,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,6.836,8.307,8.307S78.936,65.51,74.172,63.962z"/><path d="M66.91,44.945c0,8.502,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,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);

大佬总结

以上是大佬教程为你收集整理的Javascript：从 SVG 中选择自定义 data-* 属性不起作用全部内容，希望文章能够帮你解决Javascript：从 SVG 中选择自定义 data-* 属性不起作用所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：data-*
猜你在找的程序问答相关文章
其他相关热搜词更多
phpJavaPython程序员load中如何string使用参数jquery开发安装listlinuxiosandroid工具javascriptcap