angular-docs-cn/aio/content/images/marketing/home/responsive-framework.svg

169 lines
17 KiB
XML
Raw Normal View History

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="1295px" height="759px" viewBox="0 0 1295 759" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
<title>Responsive Framework</title>
<desc>Created with Sketch.</desc>
<defs>
<rect id="path-1" x="0" y="0" width="832.761381" height="555.226994" rx="10"></rect>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feOffset dx="0" dy="5" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
<feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="shadowMatrixOuter2"></feMergeNode>
</feMerge>
</filter>
<path d="M423.070823,375.356054 L672.348703,375.356054 L672.348703,19.349783 C672.348703,8.65536397 663.539446,0 652.652382,0 L93.95269,0 C83.0763366,0 74.2563691,8.65536397 74.2563691,19.349783 L74.2563691,375.356054 L423.070823,375.356054 L423.070823,375.356054 Z M111.988908,41.0412933 L634.610809,41.0412933 L634.610809,338.21233 L111.988908,338.21233 L111.988908,41.0412933 Z M376.253236,375.356054 L8.97682789,375.356054 C2.50778066,375.356054 -1.8299083,381.005936 0.761994731,386.045163 L1.28144637,387.054071 C9.24994163,402.522215 27.2165422,412.515709 47.0628079,412.515709 L705.443664,412.515709 C725.289929,412.515709 743.25653,402.522215 751.21967,387.054071 L751.739122,386.045163 C754.33638,381.005936 749.998691,375.356054 743.529644,375.356054 L376.253236,375.356054 Z" id="path-3"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="0" dy="5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
<feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="shadowMatrixOuter2"></feMergeNode>
</feMerge>
</filter>
<path d="M17.4881428,400 C7.83037292,400 0,392.07203 0,382.293886 L0,17.7061143 C0,7.92561643 7.83037292,0 17.4881428,0 L207.509532,0 C217.169627,0 225,7.92561643 225,17.7061143 L225,382.293886 C225,392.07203 217.169627,400 207.509532,400 L17.4881428,400 Z M17.4068526,52.9896762 L208.782763,52.9896762 L208.782763,336.195004 L17.4068526,336.195004 L17.4068526,52.9896762 Z" id="path-5"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-6">
<feOffset dx="0" dy="5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
<feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="shadowMatrixOuter2"></feMergeNode>
</feMerge>
</filter>
</defs>
<g id="One-framework.--All-platforms" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Responsive-Framework">
<g id="monitor" transform="translate(399.000000, 34.000000)">
<g id="frame" transform="translate(0.238619, 0.000000)">
<g id="Combined-Shape">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#ECEFF1" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
</g>
<g id="screen" transform="translate(37.000000, 40.000000)">
<rect fill="#FFFFFF" x="0.750392465" y="0.0163599182" width="760.238619" height="480.196319"></rect>
<g id="text" transform="translate(60.000000, 331.000000)" stroke-opacity="0.7" stroke="#E1E2E3" stroke-width="9" stroke-linecap="square">
<path d="M0,4.5 L186.513046,4.5" id="Line"></path>
<path d="M0,27.5 L186.513046,27.5" id="Line"></path>
<path d="M0,49.5 L186.513046,49.5" id="Line"></path>
<path d="M0,72.5 L186.513046,72.5" id="Line"></path>
<path d="M0,94.5 L186.513046,94.5" id="Line"></path>
</g>
<g id="text" transform="translate(289.000000, 332.000000)" stroke-opacity="0.7" stroke="#E1E2E3" stroke-width="9" stroke-linecap="square">
<path d="M0,4.5 L186.513046,4.5" id="Line"></path>
<path d="M0,27.5 L186.513046,27.5" id="Line"></path>
<path d="M0,49.5 L186.513046,49.5" id="Line"></path>
<path d="M0,72.5 L186.513046,72.5" id="Line"></path>
<path d="M0,94.5 L186.513046,94.5" id="Line"></path>
</g>
<g id="text" transform="translate(514.000000, 332.000000)" stroke-opacity="0.7" stroke="#E1E2E3" stroke-width="9" stroke-linecap="square">
<path d="M0,4.5 L186.513046,4.5" id="Line"></path>
<path d="M0,27.5 L186.513046,27.5" id="Line"></path>
<path d="M0,49.5 L186.513046,49.5" id="Line"></path>
<path d="M0,72.5 L186.513046,72.5" id="Line"></path>
<path d="M0,94.5 L186.513046,94.5" id="Line"></path>
</g>
<g id="boxes" transform="translate(53.000000, 25.000000)" fill="#E1E2E3" fill-opacity="0.7">
<rect id="Rectangle-70" x="0" y="149" width="204" height="135" rx="4"></rect>
<rect id="Rectangle-70" x="226" y="149" width="204" height="135" rx="4"></rect>
<rect id="Rectangle-70" x="451" y="149" width="204" height="135" rx="4"></rect>
<rect id="Rectangle-69" x="0" y="0" width="655" height="123" rx="4"></rect>
</g>
</g>
<g id="angular-logo" transform="translate(363.000000, 230.000000)">
<g id="Group">
<polygon id="Shape" fill="#DD0031" points="51.5 0 51.5 0 51.5 0 0.493085106 18.26 8.27287234 85.965 51.5 110 51.5 110 51.5 110 94.7271277 85.965 102.506915 18.26"></polygon>
<polygon id="Shape" fill="#C3002F" points="51.5 0 51.5 12.21 51.5 12.155 51.5 67.87 51.5 67.87 51.5 110 51.5 110 94.7271277 85.965 102.506915 18.26"></polygon>
<path d="M51.5,12.155 L19.6138298,83.93 L19.6138298,83.93 L31.5026596,83.93 L31.5026596,83.93 L37.912766,67.87 L64.9776596,67.87 L71.387766,83.93 L71.387766,83.93 L83.2765957,83.93 L83.2765957,83.93 L51.5,12.155 L51.5,12.155 L51.5,12.155 L51.5,12.155 L51.5,12.155 L51.5,12.155 Z M60.8138298,57.97 L42.1861702,57.97 L51.5,35.475 L60.8138298,57.97 L60.8138298,57.97 Z" id="Shape" fill="#FFFFFF"></path>
</g>
</g>
</g>
<g id="laptop" transform="translate(18.000000, 312.000000)">
<g id="Imported-Layers">
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
<use fill="#ECEFF1" fill-rule="evenodd" xlink:href="#path-3"></use>
</g>
<polygon id="Line" fill="#DDE2E6" points="75.0725076 375.46146 671.102719 375.46146 672.35355 375.46146 672.35355 372.95843 671.102719 372.95843 75.0725076 372.95843 73.821677 372.95843 73.821677 375.46146"></polygon>
<path d="M430.984819,374.209945 C430.984819,378.60861 428.025348,382.085501 424.473135,382.085501 L326.23079,382.085501 C322.680532,382.085501 319.740257,378.616468 319.740257,374.209945 L318.489426,375.46146 L432.23565,375.46146 L430.984819,374.209945 L430.984819,374.209945 Z M433.48648,374.209945 L433.48648,372.95843 L432.23565,372.95843 L318.489426,372.95843 L317.238595,372.95843 L317.238595,374.209945 C317.238595,379.915807 321.199093,384.588532 326.23079,384.588532 L424.473135,384.588532 C429.504051,384.588532 433.48648,379.909832 433.48648,374.209945 L433.48648,374.209945 Z" id="Path-Copy-4" fill="#DDE2E6"></path>
<path d="M109.196375,36.5082873 L636.978852,36.5082873 L636.978852,41.2195446 L636.978852,41.5143479 L109.196375,41.5143479 L109.196375,36.5082873 Z" id="top-shadow" fill="#DDE2E6"></path>
<g id="screen" transform="translate(111.000000, 39.000000)">
<rect fill="#FFFFFF" x="0.516695994" y="0.0102036912" width="523.475737" height="299.498744"></rect>
<g id="text" transform="translate(41.000000, 216.000000)" stroke-opacity="0.7" stroke="#E1E2E3" stroke-width="6.174" stroke-linecap="square">
<path d="M0.314060447,2.85446985 L128.740915,2.85446985" id="Line"></path>
<path d="M0.314060447,17.1995842 L128.740915,17.1995842" id="Line"></path>
<path d="M0.314060447,30.9209979 L128.740915,30.9209979" id="Line"></path>
<path d="M0.314060447,45.2661123 L128.740915,45.2661123" id="Line"></path>
<path d="M0.314060447,58.987526 L128.740915,58.987526" id="Line"></path>
</g>
<g id="text" transform="translate(198.000000, 216.000000)" stroke-opacity="0.7" stroke="#E1E2E3" stroke-width="6.174" stroke-linecap="square">
<path d="M0.996057819,3.47817048 L129.422912,3.47817048" id="Line"></path>
<path d="M0.996057819,17.8232848 L129.422912,17.8232848" id="Line"></path>
<path d="M0.996057819,31.5446985 L129.422912,31.5446985" id="Line"></path>
<path d="M0.996057819,45.8898129 L129.422912,45.8898129" id="Line"></path>
<path d="M0.996057819,59.6112266 L129.422912,59.6112266" id="Line"></path>
</g>
<g id="text" transform="translate(353.000000, 216.000000)" stroke-opacity="0.7" stroke="#E1E2E3" stroke-width="6.174" stroke-linecap="square">
<path d="M0.923784494,3.47817048 L129.350639,3.47817048" id="Line"></path>
<path d="M0.923784494,17.8232848 L129.350639,17.8232848" id="Line"></path>
<path d="M0.923784494,31.5446985 L129.350639,31.5446985" id="Line"></path>
<path d="M0.923784494,45.8898129 L129.350639,45.8898129" id="Line"></path>
<path d="M0.923784494,59.6112266 L129.350639,59.6112266" id="Line"></path>
</g>
<g id="boxes" transform="translate(36.000000, 23.000000)" fill="#E1E2E3">
<rect id="Rectangle-70" fill-opacity="0.7" x="0.494086728" y="93.8586279" width="140.467806" height="84.7200012" rx="2.744"></rect>
<rect id="Rectangle-70" fill-opacity="0.7" x="156.110381" y="93.8586279" width="140.467806" height="84.7200012" rx="2.744"></rect>
<rect id="Rectangle-70" x="311.038108" y="93.8586279" width="140.467806" height="84.7200012" rx="2.744"></rect>
<rect id="Rectangle-69" fill-opacity="0.7" x="0.494086728" y="0.0457380457" width="451.011827" height="76.7151767" rx="2.744"></rect>
</g>
</g>
<g id="angular-logo" transform="translate(338.000000, 161.000000)">
<g id="Group">
<polygon id="Shape" fill="#DD0031" points="34 0 34 0 34 0 0.325531915 12.118 5.46170213 57.0495 34 73 34 73 34 73 62.5382979 57.0495 67.6744681 12.118"></polygon>
<polygon id="Shape" fill="#C3002F" points="34 0 34 8.103 34 8.0665 34 45.041 34 45.041 34 73 34 73 62.5382979 57.0495 67.6744681 12.118"></polygon>
<path d="M34,8.0665 L12.9489362,55.699 L12.9489362,55.699 L20.7978723,55.699 L20.7978723,55.699 L25.0297872,45.041 L42.8978723,45.041 L47.1297872,55.699 L47.1297872,55.699 L54.9787234,55.699 L54.9787234,55.699 L34,8.0665 L34,8.0665 L34,8.0665 L34,8.0665 L34,8.0665 L34,8.0665 Z M40.1489362,38.471 L27.8510638,38.471 L34,23.5425 L40.1489362,38.471 L40.1489362,38.471 Z" id="Shape" fill="#FFFFFF"></path>
</g>
</g>
</g>
<g id="iphone" transform="translate(1030.000000, 325.000000)">
<g id="iPhone-Outline-Copy-2">
<use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
<use fill="#ECEFF1" fill-rule="evenodd" xlink:href="#path-5"></use>
</g>
<path d="M133.449217,26.9964062 L90.3984404,26.9964062 C88.5408193,26.9964062 87.034263,25.4710722 87.034263,23.5902978 C87.034263,21.7095234 88.5408193,20.1865433 90.3984404,20.1865433 L133.449217,20.1865433 C135.306838,20.1865433 136.813394,21.7095234 136.813394,23.5902978 C136.813394,25.4710722 135.306838,26.9964062 133.449217,26.9964062 L133.449217,26.9964062 Z" id="speaker" fill="#FFFFFF"></path>
<path d="M126.5625,366.666667 C126.5625,374.454876 120.266084,380.769231 112.5,380.769231 C104.733916,380.769231 98.4375,374.454876 98.4375,366.666667 C98.4375,358.878458 104.733916,352.564103 112.5,352.564103 C120.266084,352.564103 126.5625,358.878458 126.5625,366.666667 L126.5625,366.666667 Z" id="home-button" stroke="#FFFFFF" stroke-width="2.5"></path>
<rect id="screen" fill="#FFFFFF" x="15" y="51" width="194.318182" height="287.179487"></rect>
<g id="text" transform="translate(31.000000, 249.000000)" stroke="#E1E2E3" stroke-width="9" stroke-linecap="square">
<path d="M0,1.5 L166.689941,1.5" id="Line" opacity="0.7"></path>
<path d="M0,18.5 L166.689941,18.5" id="Line" stroke-opacity="0.7"></path>
<path d="M0,35.5 L166.689941,35.5" id="Line" stroke-opacity="0.7"></path>
<path d="M0,53.5 L166.689941,53.5" id="Line" stroke-opacity="0.7"></path>
</g>
<g id="boxes" transform="translate(25.000000, 67.000000)" fill-opacity="0.7">
<rect id="Rectangle-69" fill="#E1E2E3" x="0" y="0.00359380031" width="173" height="54.9964062" rx="4"></rect>
<rect id="Rectangle-70" fill="#E1E2E3" x="1" y="69" width="175" height="100" rx="4"></rect>
<rect id="Rectangle-69" fill="#E1E3E4" x="3" y="249" width="173" height="22.2099991" rx="4"></rect>
</g>
<g id="angular-logo" transform="translate(75.000000, 145.000000)">
<g id="Group">
<polygon id="Shape" fill="#DD0031" points="40 0 40 0 40 0 0.382978723 14.11 6.42553191 66.4275 40 85 40 85 40 85 73.5744681 66.4275 79.6170213 14.11"></polygon>
<polygon id="Shape" fill="#C3002F" points="40 0 40 9.435 40 9.3925 40 52.445 40 52.445 40 85 40 85 73.5744681 66.4275 79.6170213 14.11"></polygon>
<path d="M40,9.3925 L15.2340426,64.855 L15.2340426,64.855 L24.4680851,64.855 L24.4680851,64.855 L29.4468085,52.445 L50.4680851,52.445 L55.4468085,64.855 L55.4468085,64.855 L64.6808511,64.855 L64.6808511,64.855 L40,9.3925 L40,9.3925 L40,9.3925 L40,9.3925 L40,9.3925 L40,9.3925 Z M47.2340426,44.795 L32.7659574,44.795 L40,27.4125 L47.2340426,44.795 L47.2340426,44.795 Z" id="Shape" fill="#FFFFFF"></path>
</g>
</g>
</g>
</g>
</g>
</svg>