如何使 SVG 图标在单击和访问后改变颜色，并在尽管被访问但未单击时恢复到之前的颜色？

Question

我现在正在开发 Tumblr 主题，但我的 Tumblr 博客有自己独特的域。这使得我无法使用 Tumblr 的一些原生功能和按钮。又名：博客网页右上角的“喜欢”和“转发”帖子的常用按钮都不会显示。 这就是我使用自定义“点赞按钮”和“转发按钮”SVG 的原因，这些按钮显示在我的博客域中的各个帖子下方。使用我在网上找到的预制 Javascript 和一些自定义 CSS 来设置这些 SVG 的样式并将其定位在通常的“点赞”和“转发”按钮所在的 iframe 上。

现在效果很好。该代码能够调用必要的链接，让用户在单击这些 SVG 之一后点赞和转发任何帖子，并且用户会被重定向到该帖子的 Tumblr 仪表板 URL，以便与其进行相应的交互。但是，我注意到“点赞按钮”和“转发按钮”SVG 不会改变，并且即使在从独特的域博客中单击并与之交互后，也不会改变并保持不同的颜色，以实际表示用户发布的内容已点赞并转发。不过，这确实适用于非唯一域 Tumblr 博客，例如：“点赞按钮”的 SVG 图标在单击后将保持不同的颜色。但我想知道如何修改我当前的代码，以允许在唯一的域博客上更改这两个 SVG 图标的颜色（如果可能的话）。这样，当用户单击其中任何一个时，SVG 图标颜色将发生变化并保持不同，直到该用户再次单击该图标以“取消喜欢”某个帖子或“取消转发”某个帖子。这是我的代码：

window.onload = function () {
document.body.insertAdjacentHTML( 'beforeEnd', '<iframe id="my-like-frame" style="display:none;"></iframe>' ); document.addEventListener( 'click', function ( event ) {
var myLike = event.target;
if( myLike.className.indexOf( 'my-like' ) > -1 ) {
var frame = document.getElementById( 'my-like-frame' ),
liked = ( myLike.className == 'my-liked' ),
command = liked ? 'unlike' : 'like',
reblog = myLike.getAttribute( 'data-reblog' ),
id = myLike.getAttribute( 'data-id' ),
oauth = reblog.slice( -8 );
frame.src = 'https://www.tumblr.com/' + command + '/' + oauth + '?id=' + id;
liked ? myLike.className = 'my-like' : myLike.className = 'my-liked';
};
}, false );
}; 

/* like and reblog buttons */
.controls .my-like .like_button iframe {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    z-index:2;
    opacity:0;}
.svg {
    cursor: pointer;
    height: 22px;
    width: 22px;
    opacity:1;
    padding:1px;
    overflow:visible;
    display:inline-block;
    vertical-align:top;}
.controls a {
    fill: #000;
    position:relative;
    display:inline-block;
    overflow:visible;
    /* top right bottom left */
    padding:5px 0px 10px 0px;
    margin:-38px 35px 0px 0px;
    height:22px;
    width:22px;}
.controls .my-like:hover {
    cursor: pointer;
    fill: #ec5a5a;}
.controls .reblog {
    opacity:1;
    /* top right bottom left */
    margin:-37px 5px 0px 0px;}
.controls .reblog:hover{
    cursor: pointer;
    fill: #ec5a5a;}
.controls .reblog svg {
    height:22px;
    width:22px;
    margin-top:1px;}
.controls .my-like .liked + .svg {
    opacity:1;}
.controls .my-like .liked + .svg path {
    cursor: pointer;
    fill: #ec5a5a;}
.controls .my-like {
    cursor: pointer;
    background-image: url() !important;
    /* top right bottom left */
    margin:-38px 35px 0px 0px;
    height:22px;
    width:22px;
    display:inline-block;
    vertical-align:top;}

<!-- like + reblog button icons -->
<div class="controls">
    
    <a href="{ReblogURL}"
    target="_blank"
    class="reblog"
    style="float:right;"
    title="reblog">
    
    <div class="svg">
        <svg xmlns="http://www.w3.org/2000/svg"viewBox="0 0 576 512">
            <path d="M272 416c17.7 0 32-14.3 32-32s-14.3-32-32-32H160c-17.7 0-32-14.3-32-32V192h32c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-64-64c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8l32 0 0 128c0 53 43 96 96 96H272zM304 96c-17.7 0-32 14.3-32 32s14.3 32 32 32l112 0c17.7 0 32 14.3 32 32l0 128H416c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8l-32 0V192c0-53-43-96-96-96L304 96z"/>
            </g>
            </g>
        </svg>
    </div> <!-- <div class="svg"> -->
    </a>

    <a class="my-like"
    style="float:right;"
    title="like"
    data-reblog="{ReblogURL}"
    data-id="{PostID}">
    {LikeButton}
        
    <div class="svg">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <path d="M225.8 468.2l-2.5-2.3L48.1 303.2C17.4 274.7 0 234.7 0 192.8v-3.3c0-70.4 50-130.8 119.2-144C158.6 37.9 198.9 47 231 69.6c9 6.4 17.4 13.8 25 22.3c4.2-4.8 8.7-9.2 13.5-13.3c3.7-3.2 7.5-6.2 11.5-9c0 0 0 0 0 0C313.1 47 353.4 37.9 392.8 45.4C462 58.6 512 119.1 512 189.5v3.3c0 41.9-17.4 81.9-48.1 110.4L288.7 465.9l-2.5 2.3c-8.2 7.6-19 11.9-30.2 11.9s-22-4.2-30.2-11.9zM239.1 145c-.4-.3-.7-.7-1-1.1l-17.8-20c0 0-.1-.1-.1-.1c0 0 0 0 0 0c-23.1-25.9-58-37.7-92-31.2C81.6 101.5 48 142.1 48 189.5v3.3c0 28.5 11.9 55.8 32.8 75.2L256 430.7 431.2 268c20.9-19.4 32.8-46.7 32.8-75.2v-3.3c0-47.3-33.6-88-80.1-96.9c-34-6.5-69 5.4-92 31.2c0 0 0 0-.1 .1s0 0-.1 .1l-17.8 20c-.3 .4-.7 .7-1 1.1c-4.5 4.5-10.6 7-16.9 7s-12.4-2.5-16.9-7z"/>
            </g>
            </g>
        </svg>
    </div> <!-- <div class="svg"> -->
    </a>
        
</div> <!-- <div class="controls"> -->

Answer 1

暂时使用

localStorage

。它并不完美且持久，但不需要您维护数据库并且足够好：

liked = +localStorage.getItem("liked"), //leading + converts the flag to number

liked ? (localStorage.setItem("liked",0), myLike.className = 'my-like') : (localStorage.setItem("liked",1), myLike.className = 'my-liked');