css - 是否可以对角色的一部分应用颜色？

Question

我正在寻找适用于通过 CSS、html canvas 或任何其他技术为字母的一部分着色的内容。

我发现这篇文章是关于绘制半个字母的。

Is it possible to apply CSS to half of a character?

我的问题是我是否可以通过将类应用于零件来在各种颜色的零件上绘制字母。

Answer 1

你让它使用svg，可能会对你有帮助:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="500pt" height="500pt" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path fill="#ffffff" d=" M 0.00 0.00 L 500.00 0.00 L 500.00 500.00 L 0.00 500.00 L 0.00 0.00 Z" />
<path fill="#89bf67" d=" M 211.24 74.49 C 221.11 72.38 231.12 71.02 241.19 70.52 C 244.26 93.44 247.75 116.32 250.45 139.28 C 243.84 139.11 237.17 139.64 230.82 141.60 C 230.69 141.18 230.44 140.33 230.31 139.91 C 224.13 118.57 217.98 97.23 211.68 75.93 L 211.24 74.49 Z" />
<path fill="#bad165" d=" M 241.19 70.52 C 250.92 70.32 260.68 70.12 270.36 71.29 C 270.19 75.77 270.05 80.25 269.89 84.73 C 268.43 94.48 268.81 104.45 269.13 114.28 C 269.05 115.45 268.97 116.62 268.89 117.79 C 268.22 125.38 268.44 133.01 268.22 140.62 C 262.34 139.81 256.40 139.26 250.45 139.28 C 247.75 116.32 244.26 93.44 241.19 70.52 Z" />
<path fill="#f8b356" d=" M 270.36 71.29 C 280.65 72.19 290.90 73.88 300.91 76.47 C 296.92 99.42 292.55 122.30 288.69 145.26 C 282.08 143.33 275.38 141.67 268.55 140.71 C 268.62 133.07 268.90 125.43 268.89 117.79 C 268.97 116.62 269.05 115.45 269.13 114.28 C 270.24 104.48 270.22 94.58 269.89 84.73 C 270.05 80.25 270.19 75.77 270.36 71.29 Z" />
<path fill="#84d0f0" d=" M 183.78 84.00 C 191.79 80.05 200.36 77.34 208.97 75.06 C 210.19 74.51 211.09 74.80 211.68 75.93 C 217.98 97.23 224.13 118.57 230.31 139.91 L 230.72 141.38 C 225.25 143.77 219.45 146.15 215.52 150.86 C 215.26 150.64 214.73 150.18 214.46 149.96 C 204.08 128.26 193.87 106.47 183.44 84.80 L 183.78 84.00 Z" />
<path fill="#eb6645" d=" M 300.91 76.47 C 310.58 78.68 320.06 81.74 329.31 85.34 C 322.01 107.70 314.70 130.04 307.38 152.39 C 301.27 149.70 295.07 147.22 288.69 145.26 C 292.55 122.30 296.92 99.42 300.91 76.47 Z" />
<path fill="#eb6878" d=" M 151.24 106.32 C 160.47 97.15 171.47 89.88 183.15 84.23 L 183.44 84.80 C 193.87 106.47 204.08 128.26 214.46 149.96 L 214.99 151.09 C 211.28 154.81 209.10 159.61 207.34 164.47 C 188.62 145.11 170.00 125.65 151.24 106.32 Z" />
<path fill="#dec786" d=" M 269.13 114.28 C 268.81 104.45 268.43 94.48 269.89 84.73 C 270.22 94.58 270.24 104.48 269.13 114.28 Z" />
<path fill="#f09fc0" d=" M 329.31 85.34 C 340.42 89.50 351.09 94.85 361.19 101.08 C 360.51 102.84 359.80 104.58 359.13 106.35 C 348.63 125.35 337.47 143.99 326.75 162.88 C 320.47 159.07 313.98 155.61 307.38 152.39 C 314.70 130.04 322.01 107.70 329.31 85.34 Z" />
<path fill="#ac8cbd" d=" M 361.87 101.61 C 369.06 105.84 375.69 110.99 382.14 116.28 C 381.90 116.75 381.41 117.68 381.17 118.15 C 368.34 136.69 355.40 155.16 342.65 173.76 C 337.39 170.07 332.18 166.32 326.75 162.88 C 337.47 143.99 348.63 125.35 359.13 106.35 C 360.03 104.76 360.97 103.20 361.87 101.61 Z" />
<path fill="#e95d0e" d=" M 126.90 157.78 C 129.21 138.60 137.61 120.11 151.24 106.32 C 170.00 125.65 188.62 145.11 207.34 164.47 L 207.59 164.76 C 206.86 167.50 206.73 170.34 206.67 173.17 C 180.10 167.91 153.51 162.78 126.90 157.78 Z" />
<path fill="#98bf0e" d=" M 126.04 181.70 C 125.96 173.72 125.67 165.69 126.90 157.78 C 153.51 162.78 180.10 167.91 206.67 173.17 C 206.87 175.49 206.68 177.93 207.77 180.07 C 206.10 181.30 203.93 181.14 201.97 181.14 C 183.65 180.80 165.32 181.40 147.00 181.28 C 142.61 181.32 138.22 181.10 133.84 181.53 C 131.24 181.66 128.64 181.67 126.04 181.70 Z" />
<path fill="#8e9aca" d=" M 207.77 180.07 L 208.14 179.03 C 207.51 182.42 207.98 186.94 211.66 188.35 L 211.43 188.72 C 209.94 188.98 209.87 190.61 209.60 191.78 L 209.10 191.92 C 209.45 188.45 208.18 185.20 207.05 181.99 C 204.37 181.67 201.70 181.21 199.00 181.21 C 177.28 181.19 155.56 181.53 133.84 181.53 C 138.22 181.10 142.61 181.32 147.00 181.28 C 165.32 181.40 183.65 180.80 201.97 181.14 C 203.93 181.14 206.10 181.30 207.77 180.07 Z" />
<path fill="#fff160" d=" M 126.04 181.70 C 128.64 181.67 131.24 181.66 133.84 181.53 C 155.56 181.53 177.28 181.19 199.00 181.21 C 201.70 181.21 204.37 181.67 207.05 181.99 C 208.18 185.20 209.45 188.45 209.10 191.92 C 207.49 192.24 205.88 192.55 204.28 192.94 C 202.49 193.11 200.70 193.22 198.92 193.46 C 175.58 197.06 152.26 200.77 128.91 204.31 C 127.23 196.89 126.22 189.31 126.04 181.70 Z" />
<path fill="#e4007b" d=" M 209.60 191.78 C 209.87 190.61 209.94 188.98 211.43 188.72 C 213.09 190.26 214.37 192.19 216.06 193.71 C 215.63 194.53 215.20 195.35 214.79 196.19 C 214.21 196.51 213.05 197.16 212.47 197.48 C 192.57 213.74 172.76 230.11 152.78 246.27 C 148.12 242.24 144.09 237.54 140.54 232.51 C 161.58 219.00 183.28 206.51 204.28 192.94 C 205.88 192.55 207.49 192.24 209.10 191.92 L 209.60 191.78 Z" />
<path fill="#c693be" d=" M 128.91 204.31 C 152.26 200.77 175.58 197.06 198.92 193.46 C 200.70 193.22 202.49 193.11 204.28 192.94 C 183.28 206.51 161.58 219.00 140.54 232.51 C 134.87 223.99 131.12 214.29 128.91 204.31 Z" />
<path fill="#8e9aca" d=" M 216.06 193.71 C 222.92 199.22 231.20 202.37 239.36 205.36 C 233.98 219.12 226.68 232.03 220.44 245.40 C 215.99 255.13 211.09 264.63 206.48 274.28 L 206.32 274.61 C 198.44 271.72 190.57 268.77 183.01 265.13 C 193.62 242.16 204.27 219.20 214.79 196.19 C 215.20 195.35 215.63 194.53 216.06 193.71 Z" />
<path fill="#f8b356" d=" M 212.47 197.48 C 213.05 197.16 214.21 196.51 214.79 196.19 C 204.27 219.20 193.62 242.16 183.01 265.13 C 172.25 260.06 161.82 254.05 152.78 246.27 C 172.76 230.11 192.57 213.74 212.47 197.48 Z" />
<path fill="#ac8cbd" d=" M 239.36 205.36 C 244.65 207.11 249.96 208.84 255.30 210.44 C 251.95 221.39 248.69 232.38 245.40 243.35 C 244.42 246.35 243.83 249.50 242.37 252.34 L 242.80 252.65 C 240.46 258.88 238.79 265.34 236.90 271.71 C 235.94 275.24 234.83 278.73 234.10 282.31 C 231.72 282.81 229.40 281.48 227.09 281.02 C 220.20 278.88 213.03 277.33 206.48 274.28 C 211.09 264.63 215.99 255.13 220.44 245.40 C 226.68 232.03 233.98 219.12 239.36 205.36 Z" />
<path fill="#f09fc0" d=" M 255.30 210.44 C 261.83 212.39 268.47 213.96 274.99 215.91 C 272.93 241.34 270.52 266.73 268.46 292.15 C 257.28 288.75 245.99 285.71 234.59 283.10 C 234.64 279.26 236.69 275.62 236.90 271.71 C 238.79 265.34 240.46 258.88 242.80 252.65 L 242.37 252.34 C 243.83 249.50 244.42 246.35 245.40 243.35 C 248.69 232.38 251.95 221.39 255.30 210.44 Z" />
<path fill="#eb6645" d=" M 274.99 215.91 C 280.44 217.22 285.90 218.56 291.32 219.99 C 290.13 246.57 289.23 273.18 287.67 299.73 C 281.50 296.65 274.98 294.37 268.46 292.15 C 270.52 266.73 272.93 241.34 274.99 215.91 Z" />
<path fill="#ac8cbd" d=" M 291.32 219.99 C 302.15 222.95 312.85 226.52 323.10 231.14 C 311.49 254.04 300.09 277.06 288.41 299.92 C 288.21 299.98 287.82 300.09 287.63 300.14 L 287.67 299.73 C 289.23 273.18 290.13 246.57 291.32 219.99 Z" />
<path fill="#fff160" d=" M 288.41 299.92 C 300.09 277.06 311.49 254.04 323.10 231.14 C 328.81 233.56 334.34 236.39 339.70 239.50 C 337.62 242.28 336.17 245.46 334.19 248.30 C 321.62 266.15 309.83 284.54 297.18 302.33 C 296.74 302.74 295.88 303.57 295.45 303.98 C 293.31 302.28 290.65 301.45 288.41 299.92 Z" />
<path fill="#98bf0e" d=" M 334.19 248.30 C 336.17 245.46 337.62 242.28 339.70 239.50 C 346.44 243.48 353.06 247.77 358.91 253.00 L 358.22 253.73 C 339.49 272.30 320.60 290.68 301.78 309.16 C 299.71 307.79 297.82 306.19 295.90 304.64 C 296.22 303.81 296.65 303.04 297.18 302.33 C 309.83 284.54 321.62 266.15 334.19 248.30 Z" />
<path fill="#e95d0e" d=" M 301.78 309.16 C 320.60 290.68 339.49 272.30 358.22 253.73 L 359.12 253.03 C 373.27 264.75 382.52 281.69 386.04 299.62 C 381.54 300.21 377.07 301.09 372.60 301.95 C 351.35 305.63 330.15 309.69 308.92 313.50 C 307.62 313.72 306.35 313.62 305.09 313.20 C 303.47 312.43 302.38 310.98 301.17 309.73 L 301.78 309.16 Z" />
<path fill="#fff160" d=" M 372.60 301.95 C 377.23 301.95 381.81 300.03 386.38 300.45 C 387.69 307.87 388.32 315.37 388.82 322.88 C 387.20 323.15 385.56 323.33 383.93 323.23 C 360.94 323.23 337.96 323.49 314.97 323.44 C 312.42 323.40 309.85 323.64 307.33 323.18 C 306.80 319.52 305.31 316.14 303.67 312.87 L 305.09 313.20 C 306.35 313.62 307.62 313.72 308.92 313.50 C 330.15 309.69 351.35 305.63 372.60 301.95 Z" />
<path fill="#8e9aca" d=" M 112.35 368.41 C 127.50 350.08 142.30 331.45 157.57 313.24 C 163.31 318.35 169.38 323.09 175.40 327.87 C 165.09 341.08 154.26 353.88 143.87 367.03 C 138.93 373.39 133.41 379.29 128.77 385.88 C 122.82 381.33 117.11 376.47 111.62 371.38 C 110.19 370.51 111.80 369.22 112.35 368.41 Z" />
<path fill="#98bf0e" d=" M 307.44 323.66 C 329.29 323.87 351.15 323.42 373.00 323.52 C 378.57 323.55 384.20 322.75 389.69 324.12 L 388.53 325.17 C 388.84 332.58 388.12 339.99 386.84 347.28 L 386.49 347.23 C 361.68 342.73 336.93 337.81 312.18 332.96 C 310.71 332.61 309.21 332.36 307.72 332.15 C 307.70 329.32 307.82 326.47 307.44 323.66 Z" />
<path fill="#ac8cbd" d=" M 175.40 327.87 C 179.93 331.11 184.45 334.38 189.06 337.50 C 180.32 352.06 172.12 366.93 163.53 381.58 C 160.39 387.31 156.77 392.77 153.85 398.63 C 153.31 399.63 152.77 400.64 152.24 401.66 C 150.76 401.47 149.62 400.41 148.37 399.71 C 141.64 395.39 135.03 390.86 128.77 385.88 C 133.41 379.29 138.93 373.39 143.87 367.03 C 154.26 353.88 165.09 341.08 175.40 327.87 Z" />
<path fill="#e95d0e" d=" M 307.62 332.36 C 309.14 332.52 310.66 332.72 312.18 332.96 C 336.93 337.81 361.68 342.73 386.49 347.23 C 383.80 366.12 373.67 383.70 360.00 396.91 C 341.91 378.20 323.94 359.36 305.78 340.72 C 306.57 337.97 307.46 335.23 307.62 332.36 Z" />
<path fill="#f09fc0" d=" M 163.53 381.58 C 172.12 366.93 180.32 352.06 189.06 337.50 C 194.97 341.20 200.94 344.81 207.13 348.01 C 199.50 371.30 191.89 394.59 184.25 417.88 C 173.28 413.60 162.56 408.48 152.64 402.14 C 153.04 400.96 153.45 399.79 153.85 398.63 C 156.77 392.77 160.39 387.31 163.53 381.58 Z" />
<path fill="#eb6878" d=" M 297.28 352.45 C 300.74 349.03 303.85 345.23 305.78 340.72 C 323.94 359.36 341.91 378.20 360.00 396.91 C 350.95 405.87 340.25 413.16 328.70 418.51 C 318.22 396.50 307.82 374.44 297.28 352.45 Z" />
<path fill="#eb6645" d=" M 207.13 348.01 C 212.97 351.11 219.08 353.62 225.22 356.06 C 222.32 370.35 220.01 384.75 217.35 399.09 C 215.81 408.29 213.84 417.42 212.60 426.67 C 202.92 424.57 193.44 421.55 184.25 417.88 C 191.89 394.59 199.50 371.30 207.13 348.01 Z" />
<path fill="#84d0f0" d=" M 281.38 360.78 C 286.90 358.49 292.51 356.21 297.28 352.45 C 307.82 374.44 318.22 396.50 328.70 418.51 C 319.92 422.81 310.54 425.89 300.99 427.93 C 294.31 405.59 288.02 383.13 281.38 360.78 Z" />
<path fill="#f8b356" d=" M 225.22 356.06 C 230.84 357.86 236.48 359.59 242.24 360.87 L 243.87 360.31 C 245.03 370.47 243.85 380.76 244.05 390.97 L 243.98 391.66 C 242.57 401.12 242.90 410.77 243.10 420.32 C 242.92 424.03 242.83 427.75 242.75 431.47 C 232.61 430.58 222.47 429.20 212.60 426.67 C 213.84 417.42 215.81 408.29 217.35 399.09 C 220.01 384.75 222.32 370.35 225.22 356.06 Z" />
<path fill="#89bf67" d=" M 261.87 362.74 C 268.39 362.79 274.97 362.24 281.26 360.42 L 281.38 360.78 C 288.02 383.13 294.31 405.59 300.99 427.93 C 291.25 430.20 281.26 431.53 271.26 431.82 C 268.42 408.76 265.10 385.75 261.87 362.74 Z" />
<path fill="#bad165" d=" M 244.05 390.97 C 244.94 381.06 244.14 371.04 245.12 361.15 C 250.59 362.48 256.26 362.67 261.87 362.74 C 265.10 385.75 268.42 408.76 271.26 431.82 C 261.77 432.10 252.22 432.26 242.75 431.47 C 242.83 427.75 242.92 424.03 243.10 420.32 C 244.70 410.87 243.97 401.20 243.98 391.66 L 244.05 390.97 Z" />
<path fill="#dec887" d=" M 243.10 420.32 C 242.90 410.77 242.57 401.12 243.98 391.66 C 243.97 401.20 244.70 410.87 243.10 420.32 Z" />
</svg>