-1
Мне нужно получить значение атрибута 'transfrom' внутри метода attr, но оно возвращает undefined.получить значение атрибута 'transform' элемента svg <use> с помощью метода JQuery .attr()
Посмотрите на 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] *" код в ваш вопрос; не ожидайте, что мы подойдем к внешнему сайту или опираемся на него, чтобы помочь вам. –
Вы можете использовать любой стиль нотации, который вы предпочитаете использовать, но имейте в виду, что это должно быть понятно. Но, пожалуйста, помните название этого руководства, оно должно быть «минимальным» (наименьшим количеством кода, необходимым для воспроизведения вашей проблемы) и «* complete *» (чтобы точно воссоздать вашу проблему). Что касается вашего мнения относительно правил, нет: это так, что ваш вопрос может быть легко понят самой широкой аудиторией, даже если внешний сайт не по какой-либо причине. –
okay, mr David, теперь все в порядке, могу ли я запустить код внутри stackoverflow? –