-1
Ich muss den Wert des Attributs 'transfrom' innerhalb der attr-Methode abrufen, aber es gibt undefined zurück.Erhalte den Wert des Attributs 'transform' des Svg-Elements <use> mit JQuery .attr() -Methode
Blick auf my pen with full code, ist der Code auch unter und folgte mit einem Snippet aus diesem Code erstellt):
<?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>In Übereinstimmung mit den Regeln der Formatierung und für seine Der Eingabeaufforderungs-Korrekturcode wurde bearbeitet. Der gebuchte Code wurde erfolgreich wie der verknüpfte 'Stift' kompiliert.
Bitte senden Sie die entsprechende "* [MCVE] *" Code in Frage; Erwarten Sie nicht, dass wir auf eine externe Website zugreifen oder auf eine externe Website zurückgreifen, um Ihnen zu helfen. –
Sie können den von Ihnen bevorzugten Notationsstil verwenden, aber beachten Sie, dass dies verständlich sein muss. Aber denken Sie bitte an den Titel dieses Leitfadens, er muss sowohl "* minimal *" (die kleinste Menge an Code, die notwendig ist, um Ihr Problem zu reproduzieren) als auch "* complete *" (um Ihr Problem genau wiederherzustellen) sein. Was Ihre Meinung zu den Regeln angeht, nein: Es ist so, dass Ihre Frage am einfachsten verstanden werden kann, auch wenn die externe Seite aus irgendeinem Grund versagt. –
okay, Herr David, jetzt ist alles in Ordnung, kann ich Code in stackoverflow ausführen? –