0
hello I wanted to change the color of all that svg or some way. then if anyone can hint at what is wrong with that code, because it doesn’t work properly
<!DOCTYPE html>
<html>
<body>
<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='58.871651pt' height='9.794271pt' viewBox='-.239051 -.242965 58.871651 9.794271'>
<defs>
<path id='g0-67' d='M8.930511-8.308842C8.930511-8.416438 8.846824-8.416438 8.822914-8.416438S8.751183-8.416438 8.655542-8.296887L7.830635-7.292653C7.412204-8.009963 6.75467-8.416438 5.858032-8.416438C3.275716-8.416438 .597758-5.798257 .597758-2.988792C.597758-.992279 1.996513 .251059 3.741968 .251059C4.698381 .251059 5.535243-.155417 6.228643-.74122C7.268742-1.613948 7.579577-2.773599 7.579577-2.86924C7.579577-2.976837 7.483935-2.976837 7.44807-2.976837C7.340473-2.976837 7.328518-2.905106 7.304608-2.857285C6.75467-.992279 5.140722-.095641 3.945205-.095641C2.677958-.095641 1.578082-.908593 1.578082-2.606227C1.578082-2.988792 1.697634-5.068991 3.048568-6.635118C3.706102-7.400249 4.829888-8.069738 5.965629-8.069738C7.280697-8.069738 7.866501-6.981818 7.866501-5.762391C7.866501-5.451557 7.830635-5.188543 7.830635-5.140722C7.830635-5.033126 7.950187-5.033126 7.986052-5.033126C8.117559-5.033126 8.129514-5.045081 8.177335-5.260274L8.930511-8.308842Z'/>
<path id='g0-69' d='M8.308842-2.773599C8.320797-2.809465 8.356663-2.893151 8.356663-2.940971C8.356663-3.000747 8.308842-3.060523 8.237111-3.060523C8.18929-3.060523 8.16538-3.048568 8.129514-3.012702C8.105604-3.000747 8.105604-2.976837 7.998007-2.737733C7.292653-1.06401 6.77858-.3467 4.865753-.3467H3.120299C2.952927-.3467 2.929016-.3467 2.857285-.358655C2.725778-.37061 2.713823-.394521 2.713823-.490162C2.713823-.573848 2.737733-.645579 2.761644-.753176L3.58655-4.052802H4.770112C5.702615-4.052802 5.774346-3.849564 5.774346-3.490909C5.774346-3.371357 5.774346-3.263761 5.69066-2.905106C5.66675-2.857285 5.654795-2.809465 5.654795-2.773599C5.654795-2.689913 5.71457-2.654047 5.786301-2.654047C5.893898-2.654047 5.905853-2.737733 5.953674-2.905106L6.635118-5.678705C6.635118-5.738481 6.587298-5.798257 6.515567-5.798257C6.40797-5.798257 6.396015-5.750436 6.348194-5.583064C6.109091-4.662516 5.869988-4.399502 4.805978-4.399502H3.670237L4.411457-7.340473C4.519054-7.758904 4.542964-7.79477 5.033126-7.79477H6.742715C8.2132-7.79477 8.51208-7.400249 8.51208-6.491656C8.51208-6.479701 8.51208-6.144956 8.464259-5.750436C8.452304-5.702615 8.440349-5.630884 8.440349-5.606974C8.440349-5.511333 8.500125-5.475467 8.571856-5.475467C8.655542-5.475467 8.703362-5.523288 8.727273-5.738481L8.978331-7.830635C8.978331-7.866501 9.002242-7.986052 9.002242-8.009963C9.002242-8.141469 8.894645-8.141469 8.679452-8.141469H2.84533C2.618182-8.141469 2.49863-8.141469 2.49863-7.926276C2.49863-7.79477 2.582316-7.79477 2.785554-7.79477C3.526775-7.79477 3.526775-7.711083 3.526775-7.579577C3.526775-7.519801 3.514819-7.47198 3.478954-7.340473L1.865006-.884682C1.75741-.466252 1.733499-.3467 .896638-.3467C.669489-.3467 .549938-.3467 .549938-.131507C.549938 0 .621669 0 .860772 0H6.862267C7.12528 0 7.137235-.011955 7.220922-.203238L8.308842-2.773599Z'/>
<path id='g0-76' d='M4.387547-7.244832C4.495143-7.699128 4.531009-7.81868 5.583064-7.81868C5.905853-7.81868 5.989539-7.81868 5.989539-8.045828C5.989539-8.16538 5.858032-8.16538 5.810212-8.16538C5.571108-8.16538 5.296139-8.141469 5.057036-8.141469H3.455044C3.227895-8.141469 2.964882-8.16538 2.737733-8.16538C2.642092-8.16538 2.510585-8.16538 2.510585-7.938232C2.510585-7.81868 2.618182-7.81868 2.797509-7.81868C3.526775-7.81868 3.526775-7.723039 3.526775-7.591532C3.526775-7.567621 3.526775-7.49589 3.478954-7.316563L1.865006-.884682C1.75741-.466252 1.733499-.3467 .896638-.3467C.669489-.3467 .549938-.3467 .549938-.131507C.549938 0 .621669 0 .860772 0H6.216687C6.479701 0 6.491656-.011955 6.575342-.227148L7.49589-2.773599C7.519801-2.833375 7.543711-2.905106 7.543711-2.940971C7.543711-3.012702 7.483935-3.060523 7.424159-3.060523C7.412204-3.060523 7.352428-3.060523 7.328518-3.012702C7.304608-3.000747 7.304608-2.976837 7.208966-2.749689C6.826401-1.697634 6.288418-.3467 4.267995-.3467H3.120299C2.952927-.3467 2.929016-.3467 2.857285-.358655C2.725778-.37061 2.713823-.394521 2.713823-.490162C2.713823-.573848 2.737733-.645579 2.761644-.753176L4.387547-7.244832Z'/>
<path id='g0-83' d='M7.591532-8.308842C7.591532-8.416438 7.507846-8.416438 7.483935-8.416438C7.436115-8.416438 7.424159-8.404483 7.280697-8.225156C7.208966-8.141469 6.718804-7.519801 6.706849-7.507846C6.312329-8.284932 5.523288-8.416438 5.021171-8.416438C3.502864-8.416438 2.12802-7.029639 2.12802-5.678705C2.12802-4.782067 2.666002-4.25604 3.251806-4.052802C3.383313-4.004981 4.088667-3.813699 4.447323-3.730012C5.057036-3.56264 5.212453-3.514819 5.463512-3.251806C5.511333-3.19203 5.750436-2.917061 5.750436-2.355168C5.750436-1.243337 4.722291-.095641 3.526775-.095641C2.546451-.095641 1.458531-.514072 1.458531-1.853051C1.458531-2.080199 1.506351-2.367123 1.542217-2.486675C1.542217-2.52254 1.554172-2.582316 1.554172-2.606227C1.554172-2.654047 1.530262-2.713823 1.43462-2.713823C1.327024-2.713823 1.315068-2.689913 1.267248-2.486675L.657534-.035866C.657534-.02391 .609714 .131507 .609714 .143462C.609714 .251059 .705355 .251059 .729265 .251059C.777086 .251059 .789041 .239103 .932503 .059776L1.482441-.657534C1.769365-.227148 2.391034 .251059 3.502864 .251059C5.045081 .251059 6.455791-1.243337 6.455791-2.737733C6.455791-3.239851 6.336239-3.682192 5.881943-4.124533C5.630884-4.375592 5.415691-4.435367 4.315816-4.722291C3.514819-4.937484 3.407223-4.97335 3.19203-5.164633C2.988792-5.36787 2.833375-5.654795 2.833375-6.06127C2.833375-7.065504 3.849564-8.093649 4.985305-8.093649C6.156912-8.093649 6.706849-7.376339 6.706849-6.240598C6.706849-5.929763 6.647073-5.606974 6.647073-5.559153C6.647073-5.451557 6.742715-5.451557 6.77858-5.451557C6.886177-5.451557 6.898132-5.487422 6.945953-5.678705L7.591532-8.308842Z'/>
<path id='g0-84' d='M4.985305-7.292653C5.057036-7.579577 5.080946-7.687173 5.260274-7.734994C5.355915-7.758904 5.750436-7.758904 6.001494-7.758904C7.197011-7.758904 7.758904-7.711083 7.758904-6.77858C7.758904-6.599253 7.711083-6.144956 7.639352-5.702615L7.627397-5.559153C7.627397-5.511333 7.675218-5.439601 7.746949-5.439601C7.866501-5.439601 7.866501-5.499377 7.902366-5.69066L8.249066-7.806725C8.272976-7.914321 8.272976-7.938232 8.272976-7.974097C8.272976-8.105604 8.201245-8.105604 7.962142-8.105604H1.422665C1.147696-8.105604 1.135741-8.093649 1.06401-7.878456L.334745-5.726526C.32279-5.702615 .286924-5.571108 .286924-5.559153C.286924-5.499377 .334745-5.439601 .406476-5.439601C.502117-5.439601 .526027-5.487422 .573848-5.642839C1.075965-7.089415 1.327024-7.758904 2.917061-7.758904H3.718057C4.004981-7.758904 4.124533-7.758904 4.124533-7.627397C4.124533-7.591532 4.124533-7.567621 4.064757-7.352428L2.462765-.932503C2.343213-.466252 2.319303-.3467 1.052055-.3467C.753176-.3467 .669489-.3467 .669489-.119552C.669489 0 .800996 0 .860772 0C1.159651 0 1.470486-.02391 1.769365-.02391H3.634371C3.93325-.02391 4.25604 0 4.554919 0C4.686426 0 4.805978 0 4.805978-.227148C4.805978-.3467 4.722291-.3467 4.411457-.3467C3.335492-.3467 3.335492-.454296 3.335492-.633624C3.335492-.645579 3.335492-.729265 3.383313-.920548L4.985305-7.292653Z'/>
</defs>
<g id='page1' transform='matrix(1.13 0 0 1.13 -63.986043 -65.03376)'>
<use x='56.413267' y='65.753425' xlink:href='#g0-83'/>
<use x='64.30859' y='65.753425' xlink:href='#g0-69'/>
<use x='73.674785' y='65.753425' xlink:href='#g0-76'/>
<use x='81.639291' y='65.753425' xlink:href='#g0-69'/>
<use x='91.005485' y='65.753425' xlink:href='#g0-67'/>
<use x='100.239097' y='65.753425' xlink:href='#g0-84'/>
</g>
</svg>
<button id="btnWarning" type="buttom" onclick="selecionar()">Proximo</button>
</body><!-- Generated by CodeCogs with dvisvgm 2.9.1 -->
<script>
const pathless =document.getElementById('g0-83')
const pathX = document.getElementById('g0-69')
const pathY = document.getElementById('g0-76')
const pathC = document.getElementById('g0-67')
const pathT = document.getElementById('g0-84')
let paths = [pathless, pathX, pathY, pathC, pathT]
let index = 0
function selecionar(){
var select = document.getElementById('btnWarning')
.addEventListener('click', function(){
if (index < paths.length){
index++;} });
paths[index].setAttribute('fill', 'red');
}
</script>
</html>.
But his intention was not to color a letter with each click?
– Caetano Sincero
"hello I wanted to change the color of all path of that svg or of some ...", if my solution was not what he expected I pointed out what is wrong in his code that is the Eventlistener within the function.
– Daniel Nicoletti
@Danielnicoletti the idea of your code is not exactly mine, I want to modify the color of
pathone by one with the button. but thanks for the tip, she helped me improve my code miss I make adjustment toEventListenerwork correctly with thearraypaths– anderson