-1
我需要在attr方法中获取'transfrom'属性的值，但它返回undefined。用jQuery .attr（）方法得到svg元素<use>属性'transform'的值
看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>根据格式和用于规则其提示修正码已被编辑。已发布的代码已成功编译为链接的“笔”。
请张贴相关的 “* [MCVE] *” 你的问题中的代码;不要指望我们去或依靠外部网站来帮助你。 –
您可以使用任何您喜欢使用的符号风格，但请记住它需要可以理解。但请记住该指南的标题，它必须是“* minimal *”（代表重现问题所需的最小代码量）和“* complete *”（以准确地重现您的问题）。至于你对规则的看法，不可以：即使外部网站因任何原因失败，也可以让最广泛的受众最容易地理解你的问题。 –
好吧，大卫先生，现在一切正常，我可以在stackoverflow中运行代码？ –