我有一个React项目,其中我展示了Lottie-react动画和SVG,我正在尝试确保插画与我的网站一样具有响应性。
这些组件是在.js文件中的,我像下面这样将它们添加到我的项目中
import React from 'react'
import MobileAnimation from '../../images/illustrations/mobileanimation.js';
import Icon from '../../images/illustrations/Icon.js';
const Section = () => {
return (
<section className="section-four">
<MobileAnimation fill="#49c" width={100} name="phone" className="pagefouranimation" />
// No effect to size
<Icon fill="#49c" name="phone" width="800" height="800"/>
</section>
)
}
export default Section
我尝试给'MobileAnimation'添加一个className
,并像下面这样更改宽度和高度
.pagefouranimation {
padding: 0;
width: 100px;
height: 50px;
margin-left: -124px;
}
.illustration-comp {
width: 200px;
height: 200px;
}
SVG
import React from "react";
import styled from "styled-components";
export default class Icon extends React.Component {
render() {
return (
<svg className="illustration-comp" class="illustration" viewBox="0 0 1155 700" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="359.562" y="82" width="254.804" height="537.533" rx="24.4333" fill="#F6F0F9"/>
<rect x="385.74" y="157.045" width="78.5356" height="129.147" rx="12.2167" fill="black" fill-opacity="0.06"/>
<rect x="478.238" y="157.045" width="78.5356" height="129.147" rx="12.2167" fill="black" fill-opacity="0.06"/>
<rect x="385.74" y="301.9" width="214.664" height="129.147" rx="12.2167" fill="black" fill-opacity="0.06"/>
<rect x="401.448" y="326.334" width="48.8666" height="48.8666" rx="2.74211" fill="black" fill-opacity="0.06"/>
<rect x="459.04" y="326.334" width="123.912" height="8.72618" rx="2.74211" fill="black" fill-opacity="0.06"/>
<rect x="460.785" y="342.041" width="80.2809" height="8.72618" rx="2.74211" fill="black" fill-opacity="0.06"/>
<rect x="383.995" y="443.264" width="143.109" height="129.147" rx="12.2167" fill="black" fill-opacity="0.06"/>
<rect x="541.066" y="443.264" width="59.338" height="129.147" rx="12.2167" fill="black" fill-opacity="0.06"/>
<rect x="553.283" y="455.48" width="34.9047" height="34.9047" rx="7.18627" fill="black" fill-opacity="0.06"/>
<rect x="553.283" y="497.365" width="34.9047" height="34.9047" rx="7.18627" fill="black" fill-opacity="0.06"/>
<path d="M385.883 547.76C408.673 560.367 376.388 602.713 357.397 622.31H322.849C298.302 611.097 253.026 586.792 268.3 579.277C287.392 569.882 257.693 559.275 249.207 535.334C240.722 511.393 274.361 512 298.605 512C322.849 512 303.756 480.482 329.213 473.209C354.669 465.936 345.881 494.12 345.881 512C345.881 529.88 357.397 532.001 385.883 547.76Z" fill="#FF9E80"/>
<path d="M321.247 515.288C327.676 526.002 332.101 585.573 340.99 621.131H330.99C332.505 616.283 301.594 600.524 291.593 594.16C281.592 587.796 292.805 576.885 296.745 575.067C300.685 573.249 263.712 556.278 269.47 534.459C273.742 518.272 296.097 553.559 302.2 537.489C306.073 527.291 316.701 507.712 321.247 515.288Z" fill="white" fill-opacity="0.13"/>
<path d="M343.415 621.742C341.552 616.593 339.251 609.58 336.9 601.438M333.717 492.645C326.747 502.645 333.113 507.755 329.174 525.937C324.744 546.379 328.035 567.67 333.717 589.77M333.717 589.77C320.787 572.345 304.321 556.283 277.653 539.919M333.717 589.77C334.765 593.845 335.838 597.757 336.9 601.438M336.9 601.438C344.224 591.033 361.84 568.951 373.72 563.859" stroke="#FBFBFB" stroke-width="1.36342" stroke-linecap="round"/>
<path d="M306.048 533.4C278.768 548.491 317.414 599.18 340.147 622.639H381.502C410.885 609.217 465.082 580.123 446.799 571.127C423.945 559.881 459.495 547.185 469.652 518.527C479.81 489.869 439.543 490.594 410.523 490.594C381.502 490.594 404.356 452.867 373.884 444.161C343.412 435.455 353.932 469.192 353.932 490.594C353.932 511.997 340.147 514.537 306.048 533.4Z" fill="#17A0B3"/>
<path d="M383.42 494.533C375.725 507.359 370.428 578.667 359.787 621.231H371.758C369.944 615.427 406.946 596.563 418.917 588.945C430.888 581.327 399.958 580.189 399.958 570.443C399.958 555.261 452.291 543.6 445.398 517.481C440.285 498.106 413.526 540.345 406.22 521.108C401.584 508.902 388.862 485.464 383.42 494.533Z" fill="white" fill-opacity="0.13"/>
<path d="M356.883 621.955C359.113 615.791 361.867 607.396 364.681 597.65M368.492 467.422C376.835 479.393 369.215 485.509 373.93 507.274C379.232 531.743 375.293 557.23 368.492 583.684M368.492 583.684C383.969 562.825 403.679 543.599 435.602 524.01M368.492 583.684C367.238 588.561 365.953 593.244 364.681 597.65M364.681 597.65C355.915 585.195 334.828 558.762 320.607 552.668" stroke="#FBFBFB" stroke-width="1.63205" stroke-linecap="round"/>
<path d="M714.918 600.656C713.755 598.912 712.738 578.857 712.738 568.684C708.378 570.864 698.931 571.832 693.845 571.59C695.54 580.552 699.949 599.203 701.111 599.203C702.274 599.203 708.62 600.172 714.918 600.656Z" fill="#F7B3A4"/>
<path d="M705.471 599.204L701.838 576.677C699.658 574.74 695.298 572.463 695.298 575.951C695.298 579.439 698.931 592.664 701.111 599.204H705.471Z" fill="black" fill-opacity="0.07"/>
<path d="M700.385 622.458C697.479 615.482 699.174 603.565 700.385 598.479H718.551C718.551 598.479 743.077 615.192 757.791 615.192C762.151 615.192 759.244 622.458 759.244 622.458H700.385Z" fill="#FA5C5C"/>
<path d="M730.425 610.301H737.406M735.661 612.919H745.26M726.935 606.811H732.17" stroke="white" stroke-width="1.74524" stroke-linecap="round"/>
<path d="M632.807 559.239L647.34 537.439L660.419 551.246L643.706 568.686L632.807 559.239Z" fill="#F7B3A4"/>
<path d="M655.333 540.344L635.713 561.417H632.08L649.52 535.258L655.333 540.344Z" fill="black" fill-opacity="0.08"/>
<path d="M620.453 573.768L633.533 557.055L646.613 570.861C646.613 570.861 650.522 581.432 653.879 589.754C657.535 598.817 668.412 607.194 664.779 615.187C663.671 617.624 658.966 618.82 658.966 618.82L620.453 573.768Z" fill="#FA5C5C"/>
<path d="M647.526 579.758L651.889 583.248M646.653 584.121L654.507 589.357M647.526 589.357L656.252 595.465" stroke="white" stroke-width="1.74524" stroke-linecap="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M644.706 218.146C644.147 218.712 643.574 219.293 642.979 219.889C641.83 221.037 640.682 222.015 639.595 222.941C635.18 226.701 631.783 229.596 633.532 239.508C633.255 240.248 632.666 241.082 632 242.024C630.924 243.548 629.647 245.355 629.172 247.501C628.617 250.009 629.381 251.944 630.161 253.919C630.869 255.711 631.591 257.537 631.352 259.854C631.053 262.763 629.197 265.159 627.519 267.326C625.773 269.58 624.219 271.586 624.812 273.661C625.294 275.347 625.137 277.75 624.976 280.211C624.653 285.176 624.314 290.374 629.172 290.374C632.352 290.374 633.027 291.766 633.816 293.392C634.83 295.481 636.031 297.958 642.979 298.367C649.284 298.738 655.401 297.973 660.554 297.328C665.497 296.71 669.555 296.202 672.045 296.914C673.813 297.419 675.616 298.508 677.479 299.633C680.975 301.744 684.68 303.982 688.758 302.727C698.204 299.82 707.651 288.921 704.017 284.561C702.383 282.6 701.337 282.403 700.945 281.788C700.465 281.036 700.964 279.659 702.564 273.661C705.471 262.761 701.111 260.581 697.477 259.854C693.844 259.128 691.664 248.228 693.844 243.141C696.024 238.055 691.664 231.515 688.758 229.335C687.824 228.635 687.715 226.284 687.588 223.537C687.319 217.732 686.969 210.156 678.584 212.622C675.354 213.572 673.559 211.536 671.664 209.387C669.406 206.828 667.007 204.107 661.871 206.082C653.393 209.343 649.598 213.189 644.706 218.146ZM716.37 471.311C722.183 455.325 696.024 396.466 693.844 392.833C682.217 406.785 637.165 401.311 616.819 396.466L615.365 405.913C612.459 424.515 645.158 481.969 661.871 508.371L640.798 539.617L659.691 559.236C663.715 553.54 672.478 541.093 677.961 533.077L692.39 578.129C701.212 580.335 713.127 573.128 718.466 569.899C718.756 569.723 719.027 569.559 719.277 569.41L695.955 506.191C705.833 491.026 714.187 477.315 716.37 471.311Z" fill="
#fe5b39"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M664.181 258.811C668.531 254.624 671.739 246.861 672.046 233.695V226.428C672.046 226.428 667.686 221.342 660.419 221.342C650.904 221.342 648.793 223.823 648.793 223.823C640.726 234.409 636.124 251.017 646.239 259.769L645.159 270.03L644.433 275.843L655.333 287.469L669.139 279.476C668.897 278.628 668.352 277.538 667.776 276.388C667.201 275.237 666.596 274.026 666.232 272.936C665.773 271.558 664.612 263.914 664.181 258.811Z" fill="#F7AF9F"/>
<path d="M661.145 267.847C661.145 267.847 663.567 261.065 664.052 259.854C664.778 266.393 665.505 274.387 667.685 275.84C666.958 278.746 656.785 280.926 657.512 280.2C658.093 279.618 661.145 267.847 661.145 267.847Z" fill="black" fill-opacity="0.08"/>
<path d="M672.046 233.695C671.464 258.692 660.419 264.214 650.973 262.761C634.982 255.451 639.674 235.79 648.793 223.823C648.793 223.823 650.904 221.342 660.419 221.342C667.686 221.342 672.046 226.428 672.046 226.428V233.695Z" fill="white" fill-opacity="0.05"/>
<path d="M761.724 303.408L747.565 325.935C746.956 326.902 747.652 328.161 748.795 328.161H761.27C761.812 328.161 762.308 327.86 762.559 327.38L770.871 311.448L774.18 304.832C774.663 303.865 773.96 302.729 772.88 302.729H762.954C762.455 302.729 761.99 302.985 761.724 303.408Z" fill="#2A2626"/>
<path d="M749.069 327.434L721.456 341.24C720.293 344.728 722.909 354.32 724.362 358.68L757.062 333.974C767.235 326.707 772.321 311.447 770.141 311.447C768.398 311.447 755.366 322.105 749.069 327.434Z" fill="#F7B3A4"/>
<path d="M727.807 345.023L725.189 339.787L748.75 327.57L727.807 345.023Z" fill="white" fill-opacity="0.06"/>
<path d="M645.158 534.531L680.038 482.212L661.871 429.893" stroke="black" stroke-opacity="0.07" stroke-width="1.45331" stroke-linecap="round"/>
<path d="M680.765 482.21L661.872 507.643C653.153 493.691 627.72 449.511 620.453 427.711C620.453 427.711 645.055 426.455 657.512 434.251C675.156 445.294 680.765 482.21 680.765 482.21Z" fill="black" fill-opacity="0.04"/>
<path d="M633.532 399.371C635.276 433.669 655.089 482.936 664.778 503.282L661.871 507.642L657.512 501.829C609.552 417.537 614.155 412.451 616.819 399.371H633.532Z" fill="black" fill-opacity="0.07"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M644.432 272.205L624.086 275.838C624.085 275.839 624.085 275.839 624.084 275.84C615.848 281.17 597.49 303.599 589.933 350.684C596.23 365.944 611.151 399.515 620.452 411.723L634.258 401.55L634.196 401.386L634.985 400.823C671.609 407.217 689.969 398.158 694.571 392.829C692.671 390.296 691.115 381.031 689.976 371.008L690.211 371.029L725.09 361.583C732.357 347.776 728.723 337.603 722.91 336.15L694.571 339.783C691.364 315.198 686.307 294.678 679.342 282.766C675.114 274.853 670.396 270.972 666.723 274.339C656.441 286.905 649.052 277.861 644.662 272.487L644.432 272.205Z" fill="
#002578"/>
<path d="M618.273 400.825C615.948 400.243 598.411 366.672 589.934 349.959C591.096 358.097 609.553 395.738 620.453 411.724L624.813 408.091C623.602 405.911 620.598 401.406 618.273 400.825Z" fill="#070707" fill-opacity="0.06"/>
<path d="M624.086 275.84C615.851 281.169 597.491 303.598 589.934 350.685C596.231 365.945 611.152 399.516 620.453 411.724L634.259 401.551L613.913 347.778L629.899 304.906" stroke="black" stroke-opacity="0.06" stroke-width="1.45331"/>
<path d="M622.633 416.812L621.906 410.272L632.806 402.279L638.619 410.272C638.038 414.342 632.079 421.657 629.173 424.806L622.633 416.812Z" fill="#F7B3A4"/>
<path d="M628.446 413.903L621.906 410.996L622.633 416.809L629.173 424.802L631.353 421.169L628.446 413.903Z" fill="black" fill-opacity="0.06"/>
<path d="M626.992 428.44C630.383 425.049 637.747 416.523 640.072 409.547" stroke="white" stroke-opacity="0.13" stroke-width="0.726653" stroke-linecap="round"/>
<path d="M690.211 371.031C688.516 344.629 688.032 318.712 677.858 294.006" stroke="black" stroke-opacity="0.03" stroke-width="1.45331"/>
<path d="M663.325 554.149L659.691 549.789C659.691 549.789 698.405 504.685 710.557 465.497C714.388 453.144 685.124 397.919 685.124 397.919C691.664 396.465 689 397.192 694.571 393.559C702.322 415.116 717.824 460.265 717.824 468.404C717.824 476.542 681.491 528.958 663.325 554.149Z" fill="white" fill-opacity="0.03"/>
<path d="M672.772 491.659L663.325 437.16L679.312 481.486L672.772 491.659Z" fill="black" fill-opacity="0.04"/>
<path d="M706.198 567.228L690.938 513.456L696.025 506.916L718.551 562.868L706.198 567.228Z" fill="black" fill-opacity="0.06"/>
<path d="M688.032 346.329C686.288 359.699 691.181 382.904 693.845 392.834C683.963 401.554 660.419 402.523 650.246 401.554C650.246 401.554 661.146 395.014 666.232 389.928C671.319 384.841 680.766 378.301 682.945 353.595C684.061 340.948 680.766 307.574 679.312 294.736C682.945 305.636 689.776 332.958 688.032 346.329Z" fill="black" fill-opacity="0.03"/>
<path d="M199 620.768H788.017" stroke="black" stroke-width="3.49047"/>
<path d="M919.783 272.687H825.13H778.095C776.837 272.687 775.676 273.364 775.057 274.46L770.347 282.792C769.109 284.981 766.034 285.183 764.521 283.176L757.663 274.077C757.003 273.202 755.971 272.687 754.875 272.687H729.552C727.624 272.687 726.062 271.124 726.062 269.197V153.045C726.062 151.117 727.624 149.555 729.552 149.555H919.783C921.71 149.555 923.273 151.117 923.273 153.045V269.197C923.273 271.124 921.71 272.687 919.783 272.687Z" fill="#F3F3F3"/>
<rect x="734.787" y="165.262" width="47.1214" height="89.007" fill="white" fill-opacity="0.97"/>
<rect x="741.769" y="236.816" width="33.1595" height="10.4714" rx="1.74524" fill="#1999AB"/>
<rect x="741.769" y="201.912" width="33.1595" height="29.669" fill="#DFF8F9"/>
<rect x="741.769" y="173.988" width="33.1595" height="22.6881" fill="#DFF8F9"/>
<circle cx="758.349" cy="216.746" r="7.85356" fill="#FF9E80"/>
<rect x="787.145" y="165.262" width="106.459" height="43.6309" rx="1.74524" fill="white"/>
<rect x="787.145" y="212.385" width="33.1595" height="41.8857" rx="1.74524" fill="white"/>
<rect x="823.794" y="212.385" width="33.1595" height="41.8857" rx="1.74524" fill="white"/>
<rect x="860.444" y="212.385" width="33.1595" height="41.8857" rx="1.74524" fill="white"/>
</svg> );
}
}
但是这并不起作用。如何在不同设备上更改Lottie插画和动画的大小?我唯一想到的改变尺寸的方法就是直接修改.js文件。我还有
className="illustration-comp"
和class="illustration"
,我认为你需要从SVG中删除class="illustration"
,并在CSS文件中对illustration-comp
应用媒体查询。 - Tahir Iqbal