鼠標移入svg改變svg的邊框顏色

1、將svg以字符串拿過來(注意:要將它自身的stroke去掉) 

stroke-width="1.5" 設置線條寬度
const usedIconSvg = `<svg width="20.041748" height="20.041664" viewBox="0 0 20.0417 20.0417" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<desc>
			Created with Pixso.
	</desc>
	<defs>
		<clipPath id="clip148_1857">
			<rect id="keyline" width="20.041666" height="20.041666" fill="white"/>
		</clipPath>
	</defs>
	<g clip-path="url(#clip148_1857)">
		<path id="橢圓 4" d="M10 2.99997C13.866 2.99997 17 6.13397 17 9.99997C17 13.866 13.866 17 10 17C6.13403 17 3 13.866 3 9.99997C3 6.13397 6.13403 2.99997 10 2.99997Z" />
		<mask id="mask148_1867" mask-type="alpha" maskUnits="userSpaceOnUse" x="7.671875" y="3.000031" width="9.327881" height="9.139648">
			<path id="橢圓 4" d="M8.24976 9.12498C8.24976 5.25899 6.13379 3.00003 9.99976 3.00003C13.8657 3.00003 16.9998 6.13403 16.9998 10C16.9998 13.866 13.8657 11.3125 9.99976 11.3125C6.13379 11.3125 8.24976 12.991 8.24976 9.12498Z" fill-rule="evenodd" fill="#3471FF"/>
		</mask>
		<g mask="url(#mask148_1867)">
			<path id="矩形 636" d="M13.9377 2.56235L16.1252 5.62485L10.0002 10.4373L10.0002 2.12485L13.9377 2.56235Z"  />
		</g>
	</g>
</svg>

`;

 2、span用v-html渲染出來

 <span
                                        class="btn-icon"
                                        v-html="usedIconSvg"
                                    ></span>

  3、鼠標移入改變顏色

          .btn-icon {
                    width: 20px;
                    height: 20px;
                    stroke: #4f5969;
                    &:hover {
                        stroke: #719cff;
                    }
                }

  

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章