Vue.js |通过 routerlink 更改 SVG 的填充

Posted 2023-02-22

【中文标题】Vue.js |通过 routerlink 更改 SVG 的填充

【英文标题】：Vue.js | Change Fill of a SVG via routerlink

【发布时间】：2022-01-19 02:47:30

【问题描述】：

我的想法是，我想根据您所在的网站更改标题上显示的 SVG 的颜色。所以，如果我是 f。 e.在“家”上，我想让它显示为蓝色，如果我在“联系人”上，我想让它显示为绿色。

标题，html

<router-link class="col-4 my-auto" to="/">
  <svg class="wortmarke" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080.56 140.42"><path d="M120.22,131.13c8.49-1,13.54-5.26,13.54-12.53V24c0-9.69,0-11.71-13.94-14.75V3.23h14.75c24.44,0,31.92-.8,31.92-.8l1,.8s-6.67,8.69-6.67,25.46v87.49a67.2,67.2,0,0,1-1,11.31h29.1c16.36,0,20.81-7.68,30.91-27.88h7.88L219.22,138H154.77c-13.54,0-34.55.6-34.55.6Z"/><path d="M236.8,131.13c8.49-1,13.54-5.26,13.54-12.53V24c0-9.69-1-11.71-15.56-14.75V3.23h87.89c8.28,0,15.56-.8,15.56-.8L332,38.19h-7.87c1-20.81-5.66-24.45-21.83-24.45H279.84l-2.43,2.42V64.05h33.74l1.62-11.72,8.49-1.21V89.71H310.75V74.56H279.84L277.41,77v39.2a67.2,67.2,0,0,1-1,11.31h28.09c17.37,0,19.8-2.63,29.9-23.84h7.88L334.79,138H271.35c-13.53,0-34.55.6-34.55.6Z"/><path d="M357.63,131.13c9.09-1,14.55-5.26,14.55-12.53V31.72c0-12.93-3-18-16.37-22.43V3.23h5.86c9.9,0,26.47-.8,26.47-.8A47.74,47.74,0,0,0,396,12.93l70.71,74.56c2.63,2.82,5.86,6.66,8.29,9.69V25.26c0-8.89-.21-13.74-16.37-15.36V3.23h40.81l1,3.84s-13.94,3.64-13.94,20.41V139h-8.48L392,46.87a92.53,92.53,0,0,1-8.29-9.9V118.6a59.56,59.56,0,0,1-1,10.91l18.19,1.21-.81,6.67-42.43,1.21Z"/><path d="M579.88,85.67,567.15,50.11c-1.61-4.25-3.84-11.52-5-15.56L542.5,85.67,537.25,99.2l-11.31,29.7,17.37,2.23L542.1,138H502.5v-6.87c7.88-.81,11.72-5,13.54-9.5L562.91,4.24l12.32-2.62,44.25,115c3.44,9.09,6.47,13.94,14.14,15l-.8,6.47h-8.29c-9.49,0-39.4.8-39.4.8v-7.88c5.46-.2,10.31-2,8.09-8.08l-9.5-26.06Z"/><path d="M689.8,97.39h7.88c0,26.46,16.77,32.93,29.29,32.93,10.92,0,22-5.46,22-17.78C749,81,686.57,82,686.57,39c0-21.61,16-38.18,47.48-38.18C746,.81,759.3,3,770.21,4.65l-6.67,33.54h-7.87c.4-15.36-5.46-27.28-23.24-27.28-13.54,0-22,6.87-22,17.58,0,31.92,62.43,28.28,62.43,73.14,0,26.06-21,38.79-46.88,38.79-18.18,0-41.62-5.66-42.22-20.61C683.74,117.59,684.34,113.15,689.8,97.39Z"/><path d="M790.22,131.13c8.48-1,13.54-5.26,13.54-12.53V24c0-9.69-1-11.71-15.56-14.75V3.23h87.89c8.28,0,15.55-.8,15.55-.8l-6.26,35.76H877.5c1-20.81-5.66-24.45-21.82-24.45H833.25l-2.42,2.42V64.05h33.74l1.62-11.72,8.48-1.21V89.71h-10.5V74.56H833.25L830.83,77v39.2a67.2,67.2,0,0,1-1,11.31H857.9c17.38,0,19.8-2.63,29.91-23.84h7.88L888.21,138H824.77c-13.54,0-34.55.6-34.55.6Z"/><path d="M984.19.81c17.57,0,36.77,4.65,47.68,5.66l-6.06,31.72h-7.88c-.81-20.21-17.18-27.28-36-27.28-32.32,0-46.26,25.66-46.26,53.54,0,37.58,26.66,58.19,56.57,58.19a62.69,62.69,0,0,0,38.79-13.94l3.43,5.25s-13,26.47-54.75,26.47c-44.65,0-71.32-32.93-71.32-67.89C908.42,38.39,933.88.81,984.19.81Z"/><path d="M1064.8,109.1a15.66,15.66,0,1,1-15.55,15.76A15.78,15.78,0,0,1,1064.8,109.1Z"/><path d="M49.7,13.74c15.56,0,28.69,11.31,28.69,32.12,0,16-7.07,27.48-22.83,28.9-5,.53-9.36-.3-12.93-2.52V80a69.88,69.88,0,0,0,12.93,2.46C81.63,85.06,108.09,66.67,108.09,39c0-27.47-27.27-35.76-51.32-35.76H0V9.29A56.63,56.63,0,0,1,9.75,12C12.36,13.08,22.2,13.74,25,13.74H49.7Z"/><path d="M42.63,80c-1-.3-1.93-.61-2.84-.94L38.52,75.6l3.12-4c.32.23.66.44,1,.64V24.68a2,2,0,0,0-2-1.95H27.31A11.74,11.74,0,0,0,15.55,34.48c0,25.59,0,84.12,0,84.12,0,6.87-5.26,11.52-13.54,12.53v7.47l58-1.21.81-6.67-19.2-1.82a51.43,51.43,0,0,0,1-10.3Z"/><path d="M41.64,71.6l-3.12,4L39.79,79c.91.33,1.86.64,2.84.94V72.24C42.3,72,42,71.83,41.64,71.6Z"/></svg>
</router-link>

SCSS

.router-link-active 
  color:#99CCCC;
  fill:#99CCCC;

.wortmarke 
  fill:#CCFF99;
  size: 3vw;
  transition: 250ms;
  width:100%;
  height:100%;

svg:hover.wortmarke 
  fill:#0099CC;

svg:active.wortmarke 
  fill:#99CCCC;

所有其他元素，由.router-link-active 触发，也使用:hover 或:active，如<a>，工作正常，但特别是svg 不响应命令。

我已经尝试将 svg 文件转换为字体，但根本没有成功。我严重卡住了，不知道该怎么办。

如果有任何想法，我将不胜感激。

【参考方案1】：

如果我对问题的理解正确，您希望徽标在其路由器链接处于活动状态时具有blue 填充颜色，否则为green。

由于在单击链接时将.router-link-exact-active 添加到<router-link> 的锚标记中，因此您可以将其用作选择器来定位SVG 的.wortmarke 元素，并将fill 颜色设置为blue ;并添加一个样式以默认fill 颜色设置为green：

<style scoped>
.router-link-exact-active .wortmarke 
  fill: blue; /* fill color when active */

.wortmarke 
  fill: green; /* default fill color */
  size: 3vw;
  transition: 250ms;
  width: 100%;
  height: 100%;

</style>

demo

【讨论】：

嗨，托尼，是的，您正确理解了这个问题。不幸的是，您的解决方案对我不起作用。我将我的代码与您的代码进行了比较，不再存在真正的区别。不知何故，我的 svg 根本不是 exact-active .wortmarke 的目标，而是完全被 router-link .wortmarke 覆盖

你能分享一个重现问题的链接吗？

没问题：r-n-d.informatik.hs-augsburg.de:8080/nakropin/svg-problem