英文:
How can i fill an svg area inside the stroke?
问题
我有这个SVG。
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 283.73 268.03"><defs><style>.cls-1{fill:none;stroke:#231f20;stroke-miterlimit:10;stroke-width:6px;}</style></defs><path class="cls-1" d="M227.34,231.69c9.24-1.11-85.47,12.9-85.47,12.9l31.28,15c4.65,0,37.16-9.81,37.16-9.81,13.94-5.68,20.13-2.58,20.13-2.58,37.16,9.81,50.29,2.26,50.29,2.26s0-71-62-74.5c-2.24-.13-6.32-3.62-8.28-4.65a235.64,235.64,0,0,0-23.7-10.71,253.36,253.36,0,0,0-36-11.1c-7.16-1.63-14.4-2.95-21.68-3.91-3-.4-7-.13-9.79-1.42-10.27-4.86-7.15-14-10.1-23.45,0,0-2.58-15-5.68-13.94,0,0,.52-17-6.19-21.16,0,0-.52-18.06-4.65-17,0,0-11.35-40.26-26.83-37.68,0,0-5.68-10.32-10.33-9.81,0,0-6.71-2.61-9.8,0,0,0-6.71-2-15-16.5,0,0-10.32,3.1-10.32,6.71L32.25,29.88S30.7,33.49,14.7,20.07c0,0-5.68,3.62-4.13,9.81l4.65,10.84c,2.58,1.55-2.59,18.58-2.59,18.58S5.41,76.85,7,82.53l2.58,6.71c-4.13-.52-5.16,5.16-5.16,5.16v27.87s-3.1,16.51,0,20.64c,0,0-3.1,8.78,10.32,19.62,0,0,3.61,28.9,13.93,40.25L19.86,227l,1,3.62c-4.13,0-3.61,10.32-3.61,10.32,10.87,1,21.78,1.75,32.69,2.17,5.34.21,13.27-1.51,18.29-.36,3.89.89,7.74,6.82,11.12,9.79a87.75,87.75,0,0,0,13.16,9.6c,3.42,2,7.64,3.87,11.25,2.19a4.53,4.53,0,0,0,2.47-2.54c.68-2.08-.74-4.22-2.14-5.89a83.43,83.43,0,0,0-36.85-25.28c,1.13-4.24,2.46-8.5,3.29-12.79-3.28,11.61,17,16,24.15,17.44,15.47,3,31.55,3.21,47.25,3,12.6-.2,25.18-.89,37.74-1.84C195.38,235.25,211.68,231.69,227.34,231.69Z"></path></svg>
我想在鼠标悬停在图像上时，从下到上填充SVG内部的颜色。
我尝试了以下代码：
document.addEventListener("DOMContentLoaded", (event) => {
console.log("DOM fully loaded and parsed");
const path = document.querySelector("#Layer_2");
console.log(path);
path.addEventListener("mouseenter", () => {
path.setAttribute("fill", "blue");
console.log("你触发了鼠标悬停事件");
});
path.addEventListener("mouseleave", () => {
path.setAttribute("fill", "transparent");
console.log("你离开了鼠标悬停事件");
});
});
但不起作用。
英文:
i got this svg.
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 283.73 268.03"><defs><style>.cls-1{fill:none;stroke:#231f20;stroke-miterlimit:10;stroke-width:6px;}</style></defs><path class="cls-1" d="M227.34,231.69c9.24-1.11-85.47,12.9-85.47,12.9l31.28,15c4.65,0,37.16-9.81,37.16-9.81,13.94-5.68,20.13-2.58,20.13-2.58,37.16,9.81,50.29,2.26,50.29,2.26s0-71-62-74.5c-2.24-.13-6.32-3.62-8.28-4.65a235.64,235.64,0,0,0-23.7-10.71,253.36,253.36,0,0,0-36-11.1c-7.16-1.63-14.4-2.95-21.68-3.91-3-.4-7-.13-9.79-1.42-10.27-4.86-7.15-14-10.1-23.45,0,0-2.58-15-5.68-13.94,0,0,.52-17-6.19-21.16,0,0-.52-18.06-4.65-17,0,0-11.35-40.26-26.83-37.68,0,0-5.68-10.32-10.33-9.81,0,0-6.71-2.61-9.8,0,0,0-6.71-2-15-16.5,0,0-10.32,3.1-10.32,6.71L32.25,29.88S30.7,33.49,14.7,20.07c0,0-5.68,3.62-4.13,9.81l4.65,10.84c2.58,1.55-2.59,18.58-2.59,18.58S5.41,76.85,7,82.53l2.58,6.71c-4.13-.52-5.16,5.16-5.16,5.16v27.87s-3.1,16.51,0,20.64c0,0-3.1,8.78,10.32,19.62,0,0,3.61,28.9,13.93,40.25L19.86,227l1,3.62c-4.13,0-3.61,10.32-3.61,10.32,10.87,1,21.78,1.75,32.69,2.17,5.34.21,13.27-1.51,18.29-.36,3.89.89,7.74,6.82,11.12,9.79a87.75,87.75,0,0,0,13.16,9.6c3.42,2,7.64,3.87,11.25,2.19a4.53,4.53,0,0,0,2.47-2.54c.68-2.08-.74-4.22-2.14-5.89a83.43,83.43,0,0,0-36.85-25.28c1.13-4.24,2.46-8.5,3.29-12.79-3.28,11.61,17,16,24.15,17.44,15.47,3,31.55,3.21,47.25,3,12.6-.2,25.18-.89,37.74-1.84C195.38,235.25,211.68,231.69,227.34,231.69Z"/></svg>
and i want to make an event when mouse is on the image to fill the svg area inside the stroke from bottom to top with a color.
i have try this
document.addEventListener("DOMContentLoaded", (event) => {
console.log("DOM fully loaded and parsed");
const path = document.querySelector("#Layer_2");
console.log(path);
path.addEventListener("mouseenter", () => {
path.setAttribute("fill", "blue");
console.log("tocaste el lobo");
});
path.addEventListener("mouseleave", () => {
path.setAttribute("fill", "transparent");
console.log("saliste del lobo");
});
});
but doesnt work
答案1
得分: 0
抱歉，但代码部分无需翻译。
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<svg id="Layer_2" width=200 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 283.73 268.03"><defs><style>
svg {
fill: none;
}
.cls-1{
stroke: #231f20;
stroke-width: 6px;
}
.LoboTop {
fill: white;
}
.LoboTop:hover {
fill: blue;
animation: 1.5s Reveal;
}
@keyframes Reveal {
0% { clip-path: inset(0 0 100% 0) }
100% { clip-path: inset(0) }
}
</style>
</defs>
<path class="cls-1"
id="Lobo"
d="M227.34,231.69c9.24-1.11-85.47,12.9-85.47,12.9l31.28,15c4.65,0,37.16-9.81,37.16-9.81,13.94-5.68,20.13-2.58,20.13-2.58,37.16,9.81,50.29,2.26,50.29,2.26s0-71-62-74.5c-2.24-.13-6.32-3.62-8.28-4.65a235.64,235.64,0,0,0-23.7-10.71,253.36,253.36,0,0,0-36-11.1c-7.16-1.63-14.4-2.95-21.68-3.91-3-.4-7-.13-9.79-1.42-10.27-4.86-7.15-14-10.1-23.45,0,0-2.58-15-5.68-13.94,0,0,.52-17-6.19-21.16,0,0-.52-18.06-4.65-17,0,0-11.35-40.26-26.83-37.68,0,0-5.68-10.32-10.33-9.81,0,0-6.71-2.61-9.8,0,0,0-6.71-2-15-16.5,0,0-10.32,3.1-10.32,6.71L32.25,29.88S30.7,33.49,14.7,20.07c0,0-5.68,3.62-4.13,9.81l4.65,10.84c2.58,1.55-2.59,18.58-2.59,18.58S5.41,76.85,7,82.53l2.58,6.71c-4.13-.52-5.16,5.16-5.16,5.16v27.87s-3.1,16.51,0,20.64c0,0-3.1,8.78,10.32,19.62,0,0,3.61,28.9,13.93,40.25L19.86,227l1,3.62c-4.13,0-3.61,10.32-3.61,10.32,10.87,1,21.78,1.75,32.69,2.17,5.34.21,13.27-1.51,18.29-.36,3.89.89,7.74,6.82,11.12,9.79a87.75,87.75,0,0,0,13.16,9.6c3.42,2,7.64,3.87,11.25,2.19a4.53,4.53,0,0,0,2.47-2.54c.68-2.08-.74-4.22-2.14-5.89a83.43,83.43,0,0,0-36.85-25.28c1.13-4.24,2.46-8.5,3.29-12.79-3.28,11.61,17,16,24.15,17.44,15.47,3,31.55,3.21,47.25,3,12.6-.2,25.18-.89,37.74-1.84C195.38,235.25,211.68,231.69,227.34,231.69Z"/>
<use xlink:href="#Lobo" class="LoboTop" />
</svg>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论