<use> 使用 JQuery .attr() 方法获取 svg 元素的属性"转换"的值

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

看看我的笔和完整的代码，代码也在下面，后面是从一个代码创建的片段）：

<?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>

根据格式规则并为其及时更正代码已编辑。发布的代码已成功编译为链接的"笔"。

一旦我更正代码以获取您实际单击的对象（我认为这是您的意图），而不是所有对象的数组，似乎就可以了。

var v = 0;
$('.pointUse').click(function() {
  n = $(this).attr('transform');
  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' />
      <use xlink:href='#point' class='pointUse' transform='translate(150,0)' />
      <use xlink:href='#crown' class='crownUse' transform='translate(150,0)' />
    </g>
  </svg>
</div>

使用事件对象和当前目标来获取单击的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>

相关内容

最新更新

热门标签：