如何使用JavaScript定位SVG路徑的屬性？

我想用JavaScript代替SVG路徑的fill屬性，但沒有成功。我怎樣才能做到這一點？以下是我嘗試過的一些事情。如何使用JavaScript定位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>

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

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

來源

2017-02-26 Diego Oriani

所有你似乎缺少的是 '單引號' 周圍的填充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>

來源

2017-02-26 18:48:57

嘿@克里斯，感謝你的幫助。 –

@DiegoOriani沒問題，我很樂意幫忙！ –

如何使用JavaScript定位SVG路徑的屬性？

回答

相關問題