Question

我需要在attr方法中获取'transfrom'属性的值，但它返回undefined。

查看my pen with full code，代码也在下方，后面跟着从该代码创建的代码段：）

<?xml version="1.0" encoding="UTF-8" standalone="no"?>   
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<style>
#cont {
    width:99vw;
    height:99vh;
}
svg {
    background-color:grey;
    width:100%;
    height:100%;
}
#point {
    stroke:none;
    fill:rgba(40,40,40,.9);
    cursor:pointer;
  }
#crown{
    fill:none;
    stroke:rgba(170,250,80,.8);
    stroke-width:3;     
}
</style>
</head>
<body>
<div id='cont'>
<svg xmlns:svg="http://www.w3.org/2000/svg">
<defs>
    <circle cx='80' cy='100' r='25' id='point' transform='translate(0,0)'/>
    <circle cx='80' cy='100' r='35' id='crown' transform='translate(0,0)'/>
</defs>
<g id='useGroup'>
    <use xlink:href='#point' class='pointUse'/>
    <use xlink:href='#point' class='pointUse' transform='translate(150,0)'/>
    <use xlink:href='#crown' class='crownUse' transform='translate(150,0)'/>
</g>
</svg>
</div>
<script>
var v = 0;     
$('.pointUse').click(function() {
    n = $('.pointUse').attr('transform');
    $('.crownUse').attr('transfom', n);
    console.log(n,'test' , v);
    v++;
    //console.log = undefined
});       
</script>
</body>
</xml>

$('.pointUse').click(function(e) {
  n = e.currentTarget.getAttribute("transform")
  crown.setAttribute('transform', n);
  console.log('the attribute "transform" value of this <use/> is: ' + n);
});

#cont {
  width: 99vw;
  height: 99vh;
}
svg {
  background-color: grey;
  width: 100%;
  height: 100%;
}
#point {
  stroke: none;
  fill: rgba(40, 40, 40, .9);
  cursor: pointer;
}
#crown {
  fill: none;
  stroke: rgba(170, 250, 80, .8);
  stroke-width: 3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<div id='cont'>
  <svg xmlns:svg="http://www.w3.org/2000/svg">
    <defs>
      <circle cx='80' cy='100' r='25' id='point' transform='translate(0,0)' />
      <circle cx='80' cy='100' r='35' id='crown' transform='translate(0,0)' />
    </defs>
    <g id='useGroup'>
      <use xlink:href='#point' class='pointUse' />
      <use xlink:href='#point' class='pointUse' transform='translate(150,0)' />
      <use xlink:href='#crown' class='crownUse' transform='translate(150,0)' />
    </g>
  </svg>
</div>

按照格式规则及其快速修正代码进行了编辑。已发布的代码已成功编译为链接的“笔”。

Answer 1

一旦我更正代码以获得您实际点击的对象（我认为这是您的意图）并且不是所有对象的数组，似乎很好。

＆＃13;

var v = 0;
$('.pointUse').click(function() {
  n = $(this).attr('transform');
  console.log('the attribute "transform" value of this <use/> is: ' + n);
  v++;
});

＆＃13;

#cont {
  width: 99vw;
  height: 99vh;
}
svg {
  background-color: grey;
  width: 100%;
  height: 100%;
}
#point {
  stroke: none;
  fill: rgba(40, 40, 40, .9);
  cursor: pointer;
}
#crown {
  fill: none;
  stroke: rgba(170, 250, 80, .8);
  stroke-width: 3;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<div id='cont'>
  <svg xmlns:svg="http://www.w3.org/2000/svg">
    <defs>
      <circle cx='80' cy='100' r='25' id='point' transform='translate(0,0)' />
      <circle cx='80' cy='100' r='35' id='crown' transform='translate(0,0)' />
    </defs>
    <g id='useGroup'>
      <use xlink:href='#point' class='pointUse' />
      <use xlink:href='#point' class='pointUse' transform='translate(150,0)' />
      <use xlink:href='#crown' class='crownUse' transform='translate(150,0)' />
    </g>
  </svg>
</div>

＆＃13;

Answer 2

使用事件对象和currentTarget来获取单击的use元素和标准DOM方法来获取/设置转换。

var v = 0;
$('.pointUse').click(function(e) {
  n = e.currentTarget.getAttribute("transform")
  crown.setAttribute('transform', n);
  console.log('the attribute "transform" value of this <use/> is: ' + n);
  v++;
});

#cont {
  width: 99vw;
  height: 99vh;
}
svg {
  background-color: grey;
  width: 100%;
  height: 100%;
}
#point {
  stroke: none;
  fill: rgba(40, 40, 40, .9);
  cursor: pointer;
}
#crown {
  fill: none;
  stroke: rgba(170, 250, 80, .8);
  stroke-width: 3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<div id='cont'>
  <svg xmlns:svg="http://www.w3.org/2000/svg">
    <defs>
      <circle cx='80' cy='100' r='25' id='point' transform='translate(0,0)' />
      <circle cx='80' cy='100' r='35' id='crown' transform='translate(0,0)' />
    </defs>
    <g id='useGroup'>
      <use xlink:href='#point' class='pointUse' transform='translate(0,0)'/>
      <use xlink:href='#point' class='pointUse' transform='translate(150,0)' />
      <use xlink:href='#crown' class='crownUse' transform='translate(0,0)' />
    </g>
  </svg>
</div>

使用JQuery .attr（）方法获取svg元素<use>的属性'transform'的值

2 个答案: