JavaScript를 사용하여 SVG 경로의 속성을 대상으로 지정하는 방법은 무엇입니까?

Question

자바 스크립트를 사용하여 SVG 경로의 채우기 속성을 바꾸지 않으려 고합니다. 어떻게해야합니까? 여기에 내가 시도한 몇 가지 것들이있다.

SVG

<svg width="40px" height="40px" viewBox="82 40 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <defs></defs> 
    <path d="M102,40 L83.8181818,40 L82,40 L82,41.8181818 L82,78.1818182 L82,80 L83.8181818,80 L102,80 C113.027879,80 122,71.0278788 122,60 C122,48.9721212 113.027879,40 102,40" id="logo" stroke="none" fill='#FFFFF' fill-rule="evenodd"></path> 
</svg> 

JS

$(document).ready(function() { 
    var textColor = '#FFFC1B'; 

    // $('#logo').style.fill(textColor); 
    // $("#logo", $svg).attr('style', "fill:"+textColor); }) 
    $('#logo').setAttribute(fill, textColor); 
}); 

Answer 1

당신이 누락 된 것으로 보인다 모두 채우기 ATTR 주변의 '작은 따옴표'입니다.

이 시도해주십시오 '채우기'

$(document).ready(function() { 
 
    var textColor = '#FFFC1B'; 
 
    $('#logo').attr('fill', textColor); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg width="40px" height="40px" viewBox="82 40 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <defs></defs> 
 
    <path d="M102,40 L83.8181818,40 L82,40 L82,41.8181818 L82,78.1818182 L82,80 L83.8181818,80 L102,80 C113.027879,80 122,71.0278788 122,60 C122,48.9721212 113.027879,40 102,40" id="logo" stroke="none" fill='#FFFFF' fill-rule="evenodd"></path> 
 
</svg>