vue3如何改变svg字体大小，以及子组件如何改变父组件背景色

提问：

1、hanzi-write生成的svg只能使用px像素大小，使用rem无效。2、子组件无法修改父组件背景色。

svg问题：

1.   <template>
2.    
3.   <div class="header">
4.    
5.   <div v-for="item of 200" :key="item" class="snowflake"></div>
6.   <div class="title">
7.    
8.   <div class="title__parent">
9.   <Transition
10.   name="fade"
11.   enter-active-class="animate__animated animate__slideInUp"
12.   >
13.   <p v-if="show" class="title__top">驶出孤岛</p>
14.   </Transition>
15.   </div>
16.   <div class="title__row">
17.   <div class="title__parent">
18.   <Transition
19.   name="fade"
20.   enter-active-class="animate__animated animate__slideInUp animate__fast delay"
21.   >
22.   <p v-if="show" class="title__row__left">的</p>
23.   </Transition>
24.   </div>
25.    
26.   <div class="title__row__right">
27.   <div id="character-target-div"></div>
28.   </div>
29.   </div>
30.   </div>
31.   </div>
32.   </template>
33.   <script>
34.   import { onMounted, ref } from "vue";
35.   import HanziWriter from "hanzi-writer";
36.   export default {
37.   name: "Header",
38.   setup() {
39.   const show = ref(false);
40.   const chainAnimations = () => {
41.   //创建笔法“淘”字实例
42.   var writeOne = HanziWriter.create("character-target-div", "淘", {
43.   width: 150, //宽
44.   height: 150, //高
45.   padding: 5, //内边距
46.   showCharacter: false, //不显示汉字
47.   showOutline: false, //开启动画时不显示汉字
48.   strokeColor: "#000000", //字体颜色
49.   strokeAnimationSpeed: 5, //动画速度
50.   delayBetweenStrokes: 10, //动画每笔间隔时间，默认1000
51.   });
52.    
53.   //创建笔法“金”字实例
54.   var writeTwo = HanziWriter.create("character-target-div", "金", {
55.   width: 150, //宽
56.   height: 150, //高
57.   padding: 5, //内边距
58.   showCharacter: false, //不显示汉字
59.   showOutline: false, //开启动画时不显示汉字
60.   strokeColor: "#000000", //字体颜色
61.   strokeAnimationSpeed: 5, //动画速度
62.   delayBetweenStrokes: 10, //动画每笔间隔时间，默认1000
63.   drawingWidth: 10,
64.   });
65.    
66.   //创建笔法“者”字实例
67.   var writeThree = HanziWriter.create("character-target-div", "者", {
68.   width: 150, //宽
69.   height: 150, //高
70.   padding: 5, //内边距
71.   showCharacter: false, //不显示汉字
72.   showOutline: false, //开启动画时不显示汉字
73.   strokeColor: "#000000", //字体颜色
74.   strokeAnimationSpeed: 5, //动画速度
75.   delayBetweenStrokes: 10, //动画每笔间隔时间，默认1000
76.   });
77.    
78.   setTimeout(function () {
79.   writeOne.animateCharacter({
80.   onComplete: function () {
81.   setTimeout(function () {
82.   writeTwo.animateCharacter({
83.   onComplete: function () {
84.   setTimeout(function () {
85.   writeThree.animateCharacter();
86.   }, 0);
87.   },
88.   });
89.   }, 0);
90.   },
91.   });
92.   }, 980);
93.    
94.   };
95.   //挂载执行
96.   onMounted(() => {
97.   show.value = true;
98.   chainAnimations();
99.   });
100.    
101.   return { show };
102.   },
103.   };
104.   </script>
105.    
106.   <style lang="scss" scoped>
107.   * {
108.   margin: 0;
109.   box-sizing: border-box;
110.   }
111.    
112.   #character-target-div {
113.   height: 100%;
114.   }
115.    
116.   #character-target-div svg {
117.   width: 1.6rem;
118.   }
119.    
120.   .header {
121.   width: 100%;
122.   height: 150vh;
123.   display: flex;
124.   justify-content: center;
125.   background: linear-gradient(
126.   to top,
127.   #fffbf7 40%,
128.   #fff5f5 50%,
129.   rgb(255, 218, 218) 99%
130.   ) !important;
131.    
132.   .title {
133.   width: 90%;
134.   height: 3.56rem;
135.   margin: 2.8rem 0 0 0;
136.   letter-spacing: 0.5rem;
137.   &__parent {
138.   display: block;
139.   overflow: hidden;
140.   }
141.   &__top {
142.   display: block;
143.   font-size: 1.496rem;
144.   font-family: 宋体;
145.   font-weight: bold;
146.   margin-left: 1rem;
147.   }
148.   &__row {
149.   display: flex;
150.   justify-content: flex-end;
151.   &__left {
152.   color: #000000;
153.   font-size: 1.496rem;
154.   font-family: 宋体;
155.   padding-right: 0.2rem;
156.   }
157.   &__right {
158.   color: #000;
159.   height: 1.5rem;
160.   font-size: 1.5rem;
161.   font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
162.   padding-right: 0.5rem;
163.   }
164.   }
165.   }
166.   }
167.    
168.   .snowflake {
169.   --size: 1vw;
170.   width: var(--size);
171.   height: var(--size);
172.   background: url(../../images/falling.gif) no-repeat; //金色叶子
173.   background-size: 100% 100%;
174.   position: fixed;
175.   top: -10vh; //出事高度在屏幕外 效果更真实
176.   z-index: 1; //背景图层不遮挡上面元素
177.   }
178.    
179.   @keyframes fall {
180.   100% {
181.   transform: translate3d(var(--end), 100vh, 0);
182.   }
183.   }
184.    
185.   @for $i from 0 through 200 {
186.   .snowflake:nth-child(#{$i}) {
187.   //每个雪花的大小
188.   --size: #{random(6) * 0.1}vw;
189.   //雪花移动目标点
190.   --end: #{random(20) - 40}vw;
191.   //雪花初始位置
192.   left: #{random(150)}vw;
193.   //雪花从顶到底移动的动画 动画时间可以调整雪花速度
194.   animation: fall #{5 + random(8)}s linear infinite;
195.   animation-delay: -#{random(10)}s;
196.   }
197.   }
198.    
199.   .animate__slideInUp {
200.   animation-duration: 0.9s;
201.   }
202.    
203.   .delay {
204.   animation-duration: .98s;
205.   animation-delay: 350ms;
206.   }
207.    
208.   </style>

父组件：

1.   <template>
2.   <div
3.   id="js-main-bg"
4.   class="c-main-bg"
5.   >
6.   <Footer />
7.   </div>
8.   </template>
9.    
10.   <script>
11.   import Footer from "../footer/Footer";
12.   export default {
13.   name: "ContentMain",
14.   components: {
15.   Footer,
16.   },
17.   setup() {
18.   const mainBg = document.getElementById("js-main-bg");
19.   return {
20.   mainBg
21.   }
22.   },
23.   };
24.   </script>
25.    
26.   <style lang="scss" scoped>
27.   .c-main-bg {
28.   height: 450vh;
29.   background-color: #f2f2f2;
30.   padding: 1.2rem 1rem 0.4rem;
31.   </style>

子组件：

1.   <template>
2.   <div class="section">
3.   <div class="section__row">
4.   <div class="section__row__left">
5.   <img
6.   src="../../images/pc1.jpg"
7.   alt=""
8.   />
9.   </div>
10.   <div class="section__row__right">
11.   <img
12.   src="../../images/pc2.jpg"
13.   alt=""
14.   />
15.   </div>
16.   </div>
17.   </div>
18.   </template>
19.    
20.   <script>
21.   import { mainBg } from "../contentMain/ContentMain";
22.   export default {
23.   name: "Footer",
24.   };
25.   </script>
26.    
27.   <style lang="scss" scoped>
28.   .section {
29.   display: flex;
30.   align-items: center;
31.   height: 200vh;
32.   &__row {
33.   display: flex;
34.   justify-content: space-between;
35.   align-items: flex-end;
36.   &__left {
37.   width: 55%;
38.   display: flex;
39.   justify-content: flex-end;
40.   }
41.   &__right {
42.   width: 32%;
43.   transform: translate(-20%);
44.   display: flex;
45.   justify-content: flex-end;
46.   }
47.   }
48.   img {
49.   width: 100%;
50.   border-radius: 0.5rem;
51.   }
52.   img:hover {
53.   filter: saturate(0);
54.   transition: .6s cubic-bezier(0,.89,.41,1);
55.   }
56.   }
57.   </style>

我想要达到的效果。1、修改hanzi-write生成的svg字体大小样式为rem。2、鼠标移入子组件的两个图片，父组件的背景色变为其他颜色，移出后还原。

解答：

问题1：
可以在使用 hanzi-write 生成的 SVG 字体的父元素上设置 font-size 属性，并使用 CSS 的 rem 单位：
可以通过修改父元素的 font-size 来控制生成的 SVG 字体的大小，而不会影响其他的字体大小。

1.   <template>
2.   <div>
3.   <hanzi-write
4.   :hanzi="hanzi"
5.   :width="width"
6.   :height="height"
7.   />
8.   </div>
9.   </template>
10.    
11.   <script>
12.   import HanziWrite from 'hanzi-write';
13.    
14.   export default {
15.   components: {
16.   HanziWrite
17.   },
18.   data() {
19.   return {
20.   hanzi: '你',
21.   width: 100,
22.   height: 100
23.   };
24.   }
25.   };
26.   </script>
27.    
28.   <style>
29.   div {
30.   font-size: 2rem;
31.   }
32.   </style>

、、、、、、、、、、、、、、、
问题2：

子组件

1.   <template>
2.   <img
3.   @mouseenter="changeBgColor('#ff0000')"
4.   @mouseleave="changeBgColor('#ffffff')"
5.   src="your-img-src"
6.   alt="your-img-alt">
7.   </template>
8.    
9.   <script>
10.   export default {
11.   methods: {
12.   changeBgColor(color) {
13.   this.$emit('change-bg-color', color)
14.   }
15.   }
16.   }
17.   </script>

父组件：

1.   <template>
2.   <div :style="{ backgroundColor: bgColor }">
3.   <your-component @change-bg-color="changeBgColor"></your-component>
4.   </div>
5.   </template>
6.    
7.   <script>
8.   import YourComponent from 'path-to-your-component'
9.    
10.   export default {
11.   components: {
12.   YourComponent
13.   },
14.   data() {
15.   return {
16.   bgColor: '#ffffff'
17.   }
18.   },
19.   methods: {
20.   changeBgColor(color) {
21.   this.bgColor = color
22.   }
23.   }
24.   }
25.   </script>
26.    
27.