SVGビューボックスを理解する
SVG viewBoxは、SVGの学習の旅を始めるときに、フラストレーションの原因となる可能性があります。
viewBox="0 0 50 50"のようなエイリアンのような構文では、viewBoxを理解する上で多くの人が問題に直面するのは当然です。
この記事があなたの混乱を解消し、viewBoxの力を利用できるようになることを願っています。
なぜviewBoxなのか？
viewBoxをわざわざ使用するのはなぜですか？ viewBoxを指定しなくても、完全に有効なSVGを作成できますが、viewBoxが提供する多くの可能性を奪うことになります。
viewBoxを使用すると、SVGがどのコンテナに入っていても、SVGを埋めることができます。たとえば、次のような小鳥の画像があるとします。
この画像にviewBoxが正しく設定されていると、コンテナのサイズに合わせて拡大縮小され、SVGであるため、crispのように見えます。
上からわかるように、私たちの鳥はコンテナのサイズに合わせて拡大縮小します！
viewBoxは、アニメーションに非常に役立つ画像の一部を非表示にするのにも役立ちます。
上記から、viewBoxがどれほど強力であるかがわかります。今度は、それを定義します。
viewBoxの定義
viewBoxには、空白またはコンマで区切られた4つの値があります。
上記の値をさらに詳しく説明しましょう。
- x-最小x座標を指定します
- y-最小y座標を指定します
- width-ユーザー座標/ピクセル単位の幅
- height-ユーザー座標/ピクセル単位の高さ
これで十分な理論であり、解決するための基礎が得られます。それでは、コードの記述を始めましょう。
話は安いです、コードを見せてください！
まず、鳥のSVGのコードを調べてみましょう。
<div class="bird-cage">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path d="M45.212 65.097c2.41 3.751 3.846 4.016 7.306 1.375.383-.292 1.081-.226 1.567-.057 2.749.96 5.162.316 7.197-2.074 1.455-1.708 2.312-3.865 2.89-6.17 1.6-6.38 1.514-12.826.44-19.291-.113-.68-.476-1.3-.724-1.947-.369.57-.854 1.081-1.087 1.722-1.89 5.203-4.344 9.953-7.764 13.925-3.968 4.609-8.464 8.02-14.152 8.627-.75.08-.872.698-.709 1.4.305 1.308 1.03 2.244 2.15 2.456.91.171 1.86.034 2.886.034zm-4.008 34.687c-.461-.231-.91-.617-1.386-.67-4.197-.47-8.272-1.623-12.243-3.25C17.177 91.605 8.305 84.597 1.123 74.61c-.257-.358-.476-.753-.871-1.382.734.092 1.25.138 1.76.224 5.184.871 10.368 1.269 15.55.02 9.27-2.236 15.192-9.022 18.351-19.452 2.07-6.833 2.736-13.943 2.911-21.181.09-3.692.343-7.482 1.144-11.026 2.043-9.041 6.818-15.51 14.098-19.092 9.68-4.765 18.53-2.839 26.457 5.219a22.692 22.692 0 0 1 5.23 8.401c.834 2.36 2.216 3.795 4.153 4.788 3.041 1.56 6.01 3.323 9.008 5.004.208.117.404.265.763.503-.363.375-.624.71-.935.955-2.908 2.292-5.81 4.6-8.75 6.833-.98.745-1.397 1.654-1.458 3.056a118.393 118.393 0 0 1-2.229 18.437c-1.86 9.185-4.85 17.806-9.587 25.446-2.843 4.586-6.386 8.298-10.244 11.675-2.095 1.832-4.366 1.836-6.68 2.117-6.172.75-12.23 2.151-18.139 4.427-.091.035-.165.133-.247.202h-.204z" fill="#231F20"/>
<path d="M45.211 65.098c-1.026 0-1.976.136-2.885-.035-1.12-.212-1.845-1.148-2.15-2.456-.163-.702-.042-1.32.709-1.4 5.689-.607 10.185-4.018 14.152-8.627 3.42-3.972 5.874-8.722 7.763-13.925.233-.641.72-1.151 1.088-1.722.247.647.612 1.267.724 1.947 1.074 6.465 1.16 12.911-.44 19.29-.578 2.306-1.435 4.463-2.89 6.171-2.035 2.39-4.448 3.034-7.197 2.074-.486-.169-1.184-.235-1.567.057-3.46 2.64-4.895 2.376-7.307-1.374M76.666 16c1.792-.025 3.213 1.83 3.255 4.246.04 2.42-1.43 4.442-3.224 4.432-1.725-.01-3.156-1.903-3.189-4.218-.035-2.497 1.337-4.435 3.158-4.46" fill="#FEFEFE"/>
</g>
</svg>
</div>
.bird-cage {
height 100px;
width: 100px;
border: 1px solid green;
}
したがって、上記のコードでは、クラス名bird-cageのdivでラップされたSVGがあり、SVGはこのdivのサイズにスケーリングされます。
viewBoxの値は0 0 100 100で、100 100は画像全体を示し、コンテナ（bird-cage）に合わせて拡大縮小します。
bird-cageの寸法は、私たちがviewportと呼んでいるものであり、基本的には私たちが見ているものです。上記の例では、viewBoxが完全に適合しています。
鳥にズームインしたい場合、これをどのように正確に実行しますか？ viewportではviewBoxを大きくする必要があるので、viewBoxを0 0 75 75に更新しましょう。
今、私たちはこれを持っています：
上記はブラウザでの表示です。実際に起こっていることは次のとおりです。
viewportは画像へのウィンドウ、viewBoxは画像の拡大縮小と配置に使用するツールと考えることができます。
viewBoxは、画像を切り抜くのに非常に便利なツールです。 画像をトリミングする最も簡単な方法は、最小xおよびy座標を使用することです。 鳥の右半分だけを表示したい場合は、viewBoxをviewBox="50 0 100 100"に変更できます。
これにより、次のようになります。
より明確な視覚的表現を与えるために：
上記のここのコードを確認できます。
アニメーションの作成
viewBoxをさらによく理解するために、これを使用して、空を横切って移動する雲のアニメーションを作成します。
最初に行う必要があるのは、cloudSVGを作成することです。コードは次のとおりです。
<svg id="cloudSVG" width="1572" height="736"
viewBox="-200 0 786 368" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path d="M331.262 159.527v.1c.27 0 .54.007.81-.001 3-.089 6.023.06 8.969-.58 1.204-.261 2.483-.332 3.678-.611 1.608-.375 3.168-.862 4.744-1.31 1.298-.368 2.594-.74 3.882-1.126.49-.147.973-.317 1.43-.513.702-.305 1.37-.652 2.069-.96.846-.374 1.759-.674 2.555-1.1a63.867 63.867 0 0 0 3.92-2.281c1.657-1.043 3.3-2.103 4.87-3.219 1.039-.737 1.965-1.569 2.895-2.387 1.033-.908 2.06-1.825 3.006-2.784.791-.799 1.31-1.778 2.226-2.472 1.154-.875 1.636-2 2.451-2.993.613-.747 1.025-1.586 1.568-2.367.573-.822 1.262-1.602 1.776-2.444.503-.823.903-1.689 1.248-2.558.541-1.362.999-2.743 1.49-4.116.035-.098.052-.2.095-.295.383-.828.82-1.643 1.14-2.483.29-.76.521-1.539.66-2.322.269-1.532.668-3.075.634-4.608-.081-3.62.653-7.26-.463-10.864-.378-1.223-.057-2.492-.555-3.776-.549-1.418-.966-2.887-1.454-4.334-.374-1.115-.774-2.206-1.347-3.27-.68-1.26-1.262-2.55-1.966-3.802a42.914 42.914 0 0 0-2.1-3.367c-.829-1.2-1.739-2.37-2.646-3.537a18.586 18.586 0 0 0-1.536-1.769c-.765-.764-1.711-1.436-2.377-2.242-.872-1.057-2.013-1.912-3.155-2.781-1.207-.918-2.395-1.85-3.609-2.763-.726-.546-1.427-1.127-2.245-1.586-1.137-.638-2.446-1.105-3.548-1.77-1.935-1.168-4.08-2.046-6.295-2.847-.579-.21-1.182-.379-1.76-.591-.708-.26-1.378-.59-2.107-.808-.824-.247-1.742-.33-2.536-.617-1.298-.468-2.594-.885-4.05-.952a3.977 3.977 0 0 1-.499-.055c-1.738-.303-3.464-.647-5.214-.899-1.34-.193-2.724.097-4.071-.458-1.048-.432-1.533-.648-1.664-1.565-.198-1.373-.448-2.741-.676-4.111a1.399 1.399 0 0 0-.052-.225c-.381-1.095-.769-2.19-1.145-3.288-.189-.553-.343-1.115-.542-1.666-.262-.726-.563-1.444-.828-2.17-.281-.774-.482-1.567-.82-2.326-.58-1.306-1.225-2.595-1.872-3.882-.284-.566-.627-1.117-.968-1.666-.308-.492-.653-.97-.98-1.456-.38-.567-.755-1.137-1.14-1.703-.497-.737-.998-1.473-1.506-2.206-.389-.562-.771-1.127-1.19-1.676-.487-.64-1.013-1.264-1.52-1.897-.531-.664-.996-1.363-1.602-1.985-.954-.979-2.002-1.905-3.008-2.855-1.274-1.206-2.507-2.44-3.83-3.615-1.143-1.016-2.368-1.98-3.59-2.942a29.287 29.287 0 0 0-2.282-1.635c-1.409-.906-2.86-1.776-4.292-2.661-1.233-.762-2.406-1.59-3.711-2.272-1.507-.789-3.124-1.461-4.707-2.166-1.49-.663-3-1.3-4.495-1.955-.568-.249-1.102-.542-1.68-.772a56.59 56.59 0 0 0-3.094-1.148c-.714-.237-1.496-.357-2.22-.58-.89-.273-1.73-.645-2.632-.888-.94-.254-1.931-.4-2.895-.605-1.422-.303-2.839-.618-4.258-.93-.128-.029-.25-.075-.377-.102-1.285-.282-2.553-.627-3.861-.823-1.247-.186-2.51-.185-3.789-.422-2.188-.403-4.511-.547-6.773-.532-4.191.03-8.407-.403-12.574.358-1.492.273-3.048.024-4.605.441-1.648.441-3.514.406-5.271.638-.966.128-1.912.358-2.852.58-1.101.259-2.18.574-3.28.837-.904.217-1.857.33-2.728.6-1.9.59-3.76 1.254-5.637 1.886-1.13.38-2.292.712-3.387 1.143-1.574.62-3.136 1.265-4.634 1.982-1.525.73-2.955 1.573-4.447 2.345-2.382 1.232-4.709 2.512-6.791 4.033-1.437 1.05-3.021 1.99-4.406 3.076-1.756 1.377-3.414 2.827-5.04 4.29-1.315 1.182-2.528 2.426-3.764 3.655-.27.268-.423.602-.678.881-1.01 1.102-2.052 2.189-3.053 3.295-.326.36-.565.764-.84 1.15-.512.719-1.033 1.436-1.529 2.161-.584.854-1.157 1.713-1.716 2.576-.35.542-.661 1.098-.999 1.645-.329.532-.688 1.056-1 1.594-.464.8-.793 1.655-1.37 2.403-.715.925-1.845 1.147-3.123.777-.623-.18-1.23-.395-1.854-.573-1.104-.316-2.206-.638-3.328-.916-1.547-.384-3.095-.776-4.672-1.075-1.368-.259-2.777-.39-4.167-.58-.199-.028-.395-.067-.594-.093-2.176-.289-4.342-.761-6.53-.825-4.482-.131-8.979-.103-13.465-.019-2.043.038-4.076.363-6.113.558-.033.003-.066.012-.098.019-2.163.448-4.33.883-6.486 1.352-1.465.319-2.913.684-4.365 1.035-.664.16-1.323.326-1.978.5-.811.215-1.637.407-2.42.67-1.233.414-2.442.87-3.65 1.325-1.008.38-2.018.758-2.994 1.18-.908.392-1.767.845-2.657 1.26-.859.4-1.777.737-2.587 1.186-1.318.731-2.565 1.533-3.85 2.298-.946.562-1.963 1.067-2.843 1.683-1.068.747-2.047 1.569-3.028 2.384a282.72 282.72 0 0 0-4.368 3.71c-.86.745-1.713 1.5-2.511 2.283-.723.71-1.562 1.407-1.995 2.215-.597 1.115-1.842 1.914-2.285 3.114-.314.843-1.279 1.536-1.793 2.353-.582.927-.988 1.916-1.468 2.88-.274.552-.535 1.107-.816 1.657-.347.679-.77 1.34-1.05 2.034-.333.832-.526 1.696-.827 2.538-.365 1.021-.9 2.019-1.132 3.056-.163.723-2.184 1.687-3.098 1.45-1.206-.311-2.418-.66-3.667-.819-2.014-.257-4.054-.468-6.092-.525-3.323-.096-6.658-.235-9.958.337-.973.169-2.034.044-3.016.193-1.418.217-2.797.569-4.197.849-1.896.38-3.801.73-5.69 1.127-.6.127-1.165.353-1.738.549-.875.299-1.741.614-2.615.915-1.003.348-2.069.617-3.002 1.048-1.541.712-3.004 1.52-4.489 2.3-1.253.66-2.534 1.296-3.724 2.016-1.364.826-2.727 1.671-3.935 2.621-1.441 1.133-2.711 2.387-4.066 3.583-.41.361-.925.665-1.269 1.057-.773.88-1.46 1.803-2.2 2.7-.616.746-1.315 1.456-1.873 2.226-.684.94-1.282 1.918-1.871 2.896-.312.517-.547 1.06-.776 1.602-.303.71-.53 1.44-.854 2.143-.336.733-.818 1.43-1.109 2.171-.292.748-.47 1.526-.625 2.299-.248 1.241-.566 2.485-.623 3.733-.1 2.206-.027 4.417-.02 6.626 0 .228.023.459.079.682.36 1.435.72 2.87 1.106 4.301.273 1.011.589 2.017.889 3.024.014.048.063.089.088.135.348.64.72 1.272 1.032 1.922.31.646.474 1.337.853 1.957.507.83 1.177 1.604 1.742 2.416.58.834 1.038 1.72 1.692 2.516.7.852 1.706 1.57 2.323 2.448.778 1.106 2 1.907 3.021 2.84a33.438 33.438 0 0 0 3.804 3.005c1.772 1.197 3.674 2.287 5.537 3.408.777.468 1.57.925 2.404 1.332.817.399 1.68.745 2.547 1.082.624.241 1.297.41 1.929.643 1.237.455 2.445.954 3.693 1.391.739.258 1.53.428 2.295.643 1.002.28 1.982.613 3.005.834 1.202.26 2.44.428 3.665.625 1.864.302 3.72.804 5.597.852 5.858.148 11.735.35 17.55-.475 1.143-.163 2.275-.365 3.41-.551.062-.01.113-.054.175-.069 1.129-.278 2.258-.555 3.388-.831.847-.208 1.72-.369 2.535-.632 1.309-.423 2.577-.919 3.866-1.375.672-.238 1.415-.393 2.017-.704.822-.424 1.492-.47 2.25.063.613.43 1.32.784 1.965 1.19 1.739 1.095 3.452 2.212 5.206 3.292.697.43 1.461.8 2.218 1.17.787.384 1.609.73 2.405 1.103 1.308.613 2.572 1.287 3.923 1.84 1.46.598 2.795 1.375 4.459 1.7.768.15 1.444.551 2.192.78 1.253.387 2.533.724 3.8 1.087 1.097.314 2.181.654 3.288.947.806.215 1.647.354 2.456.563 1.028.266 2.012.692 3.065.827 1.819.233 3.568.6 5.321 1.019 1.176.282 2.44.366 3.67.507 1.485.17 2.971.336 4.464.448 2.707.203 5.416.407 8.131.53 1.952.087 3.919.112 5.87.04 3.763-.14 7.519-.367 11.277-.559.134-.007.267-.027.4-.046 2.04-.276 4.08-.551 6.118-.83 1.482-.205 2.963-.413 4.444-.624.097-.014.186-.058.282-.08 1.179-.273 2.36-.544 3.539-.815 1.21-.278 2.42-.554 3.628-.834.97-.226 1.938-.454 2.905-.687.783-.19 1.58-.356 2.339-.59.897-.274 1.754-.622 2.642-.915 1.091-.362 2.237-.64 3.286-1.06 1.873-.75 3.713-1.551 5.522-2.384 1.23-.567 2.298-1.388 3.605-1.786.954-.292 2.433-.392 3.227-.025 1.483.686 2.614 1.795 3.939 2.688a50.88 50.88 0 0 0 3.398 2.11c1.01.57 1.96 1.179 3.124 1.628 1.586.611 2.92 1.584 4.472 2.257 1.47.638 3.08 1.09 4.63 1.624.602.207 1.206.413 1.805.628.752.27 1.474.606 2.255.806.945.241 1.955.337 2.912.555 1.965.448 3.892.996 5.875 1.383 1.189.233 2.486.357 3.66.422 4.181.234 8.348.867 12.573.537.335-.026.676-.017 1.008-.057 2.275-.267 4.55-.538 6.823-.818 1.523-.188 3.044-.391 4.564-.59.064-.007.123-.04.186-.057 1.033-.282 2.053-.596 3.103-.836.986-.225 2.003-.372 3.006-.556.096-.017.187-.05.275-.083.793-.295 1.575-.607 2.378-.882 1.086-.374 2.225-.668 3.277-1.088 1.465-.585 2.876-1.248 4.299-1.89.982-.445 1.97-.885 2.911-1.378a97.785 97.785 0 0 0 3.755-2.088c1.2-.698 2.415-1.389 3.53-2.16 1.101-.762 2.118-1.599 3.113-2.443 1.244-1.057 2.48-2.124 3.622-3.244 1.002-.982 1.868-2.044 2.795-3.069.652-.72 1.347-1.42 1.953-2.16.684-.838 2.25-1.102 3.41-.595.996.435 2.05.801 3.103 1.16.77.26 1.584.448 2.366.69 1.353.418 2.668.915 4.052 1.26 1.14.284 2.357.393 3.539.581.164.027.323.073.487.103 1.585.288 3.154.72 4.761.827 2.142.144 4.314.036 6.473.036zM.202 119.772c.206-.44.507-.867.601-1.32.32-1.54.428-3.113.884-4.627.426-1.414 1.204-2.765 1.806-4.15.292-.673.48-1.374.814-2.035.403-.794.898-1.563 1.378-2.333.386-.62.79-1.235 1.222-1.837a34.728 34.728 0 0 1 1.564-2.05c.8-.955 1.608-1.912 2.493-2.824.771-.796 1.622-1.551 2.492-2.289 1.304-1.107 2.617-2.211 3.996-3.265 1.38-1.055 2.79-2.097 4.29-3.054 1.253-.798 2.61-1.518 4-2.177 1.87-.887 3.793-1.713 5.737-2.503 1.404-.57 2.897-1.014 4.32-1.561 1.688-.651 3.465-1.086 5.272-1.515 1.532-.364 3.072-.647 4.615-.956 2.836-.568 5.725-.717 8.578-1.085 2.839-.366 5.63-.3 8.436-.264 2.232.03 4.46.326 6.686.522.286.025.555.158.83.246.963.308 1.681-.088 1.895-.865.28-1.02.737-2.012 1.121-3.016.303-.79.594-1.584.924-2.368.168-.4.387-.792.625-1.172.608-.97 1.243-1.93 1.86-2.896.242-.38.433-.781.7-1.151.843-1.166 1.71-2.322 2.567-3.482.749-1.014 1.4-2.077 2.268-3.029 1.059-1.162 2.297-2.231 3.46-3.339.561-.536 1.097-1.088 1.697-1.599a58.602 58.602 0 0 1 2.85-2.303c1.231-.923 2.501-1.82 3.792-2.697.964-.655 1.984-1.264 2.985-1.888.811-.505 1.604-1.03 2.457-1.491.962-.522 1.802-1.138 2.959-1.506 1.155-.367 2.081-1.123 3.172-1.633 1.036-.484 2.156-.868 3.235-1.302 1.077-.434 2.143-.883 3.222-1.314.537-.214 1.073-.442 1.642-.597.822-.222 1.679-.366 2.508-.573.564-.141 1.106-.333 1.659-.499 1.505-.45 3.01-.9 4.517-1.348.061-.018.126-.033.192-.042 1.285-.193 2.58-.355 3.853-.582 1.496-.268 2.956-.662 4.465-.872 1.15-.16 2.378-.009 3.522-.18 5.673-.853 11.395-.381 17.083-.301 2.175.03 4.495.126 6.616.785.149.046.335.022.5.045 1.463.2 2.93.39 4.387.613.856.132 1.719.273 2.542.488 1.564.409 3.113.851 4.645 1.322.888.273 1.407.082 1.84-.611.783-1.254 1.668-2.472 2.492-3.712.472-.712.842-1.466 1.376-2.15 1.056-1.353 2.102-2.717 3.168-4.06.95-1.199 2.091-2.318 2.953-3.57.669-.974 1.752-1.79 2.674-2.661.844-.798 1.654-1.624 2.588-2.359a456.534 456.534 0 0 1 7.441-5.69 59.776 59.776 0 0 1 3.31-2.337c1.097-.715 2.182-1.478 3.426-2.018 1.655-.717 3.094-1.632 4.643-2.444.882-.462 1.912-.761 2.842-1.175 1.315-.587 2.568-1.255 3.907-1.806 1.106-.456 2.304-.784 3.452-1.183.756-.262 1.493-.555 2.246-.823.532-.19 1.063-.394 1.62-.534 1.556-.391 3.135-.731 4.685-1.135.868-.227 1.694-.544 2.541-.815.184-.059.377-.112.573-.143 1.26-.193 2.537-.344 3.784-.58 1.24-.236 2.453-.555 3.679-.836.063-.014.133-.014.2-.02 2.33-.205 4.663-.39 6.986-.627.912-.093 1.803-.304 2.704-.462h11.747c.936.156 1.865.363 2.813.457 2.457.24 4.933.374 7.38.664 1.197.141 2.329.57 3.512.804 1.148.227 2.345.32 3.485.567 1.04.225 2.032.576 3.045.872.123.036.247.072.372.103 1.55.369 3.12.693 4.642 1.117 1.545.43 3.081.899 4.549 1.458 1.937.74 3.804 1.583 5.7 2.382 1.212.51 2.475.964 3.619 1.548 1.745.892 3.419 1.865 5.1 2.824 1.838 1.049 3.683 2.09 5.461 3.194 1.06.658 2.01 1.416 2.982 2.15 1.445 1.091 2.9 2.178 4.286 3.311 1.059.864 2.034 1.787 3.02 2.7.995.92 1.977 1.85 2.925 2.797.796.795 1.543 1.619 2.298 2.437.655.713 1.324 1.422 1.927 2.16.549.672 1.011 1.384 1.524 2.072.838 1.127 1.717 2.237 2.515 3.379.334.478.486 1.026.767 1.529.217.386.51.748.761 1.125.386.578.8 1.147 1.134 1.742.306.541.51 1.114.781 1.667.338.694.695 1.383 1.05 2.071.27.52.604 1.025.808 1.557.342.892.564 1.81.907 2.7.329.855.748 1.69 1.124 2.533.032.071.034.15.055.223.196.692.425 1.38.585 2.076.303 1.308.606 2.617.833 3.934.143.843.418 1.036 1.51 1.186 1.82.25 3.617.591 5.422.892 1.184.198 2.384.349 3.545.602.956.207 1.863.542 2.8.803.82.229 1.67.405 2.477.658.773.241 1.507.558 2.265.83.565.205 1.164.36 1.707.592 1.451.621 2.888 1.263 4.319 1.914 1.153.526 2.345 1.02 3.417 1.63 1.553.885 3.027 1.85 4.51 2.804 1.094.703 2.193 1.407 3.213 2.169 1.16.866 2.241 1.794 3.346 2.702.535.44 1.09.872 1.555 1.352.873.901 1.673 1.842 2.53 2.753.716.765 1.485 1.501 2.2 2.266.364.388.679.804.973 1.223.326.462.592.946.906 1.413.627.935 1.27 1.865 1.907 2.797.599.875 1.29 1.722 1.774 2.631.595 1.117 1.005 2.288 1.516 3.43.357.798.748 1.588 1.122 2.381.023.047.054.094.066.142.285 1.072.535 2.148.86 3.212.334 1.105.74 2.197 1.115 3.295.016.048.02.1.028.15.264 1.705.675 3.405.757 5.114.13 2.713.139 5.436.009 8.149-.091 1.915-.318 3.85-.841 5.718-.232.832-.333 1.667-.562 2.489-.259.932-.722 1.833-1.09 2.749-.067.17-.083.351-.153.52-.411.983-.836 1.964-1.245 2.948-.235.566-.402 1.151-.685 1.703-.392.77-.887 1.51-1.296 2.274-.282.53-.466 1.09-.747 1.621-.254.48-.56.947-.878 1.405-.846 1.22-1.637 2.468-2.59 3.64-.94 1.158-2.051 2.236-3.089 3.349-.904.97-1.762 1.969-2.731 2.9A32.21 32.21 0 0 1 374 149.21c-1.348 1.019-2.77 1.985-4.196 2.943-1.918 1.287-3.795 2.618-5.832 3.79-1.459.841-3.14 1.465-4.74 2.163-1.483.644-2.968 1.288-4.493 1.873-.742.283-1.586.413-2.364.648-.797.24-1.557.548-2.356.783-.826.244-1.676.442-2.52.65-.596.146-1.19.307-1.802.405-1.354.218-2.711.447-4.083.587-2.964.303-5.936.574-8.911.81-.82.064-1.664-.037-2.496-.074-1.615-.072-3.234-.116-4.84-.24-1.807-.139-3.617-.295-5.398-.553-1.626-.236-3.229-.581-4.813-.95-.855-.2-1.637-.57-2.472-.824-.683-.21-1.407-.346-2.095-.55-1.092-.323-2.167-.676-3.252-1.015-.815-.254-1.263-.04-1.742.565-.63.796-1.369 1.547-2.122 2.282-.786.768-1.594 1.53-2.482 2.232a202.524 202.524 0 0 1-5.086 3.856c-1.201.89-2.395 1.79-3.684 2.604-1.761 1.113-3.554 2.208-5.438 3.199-1.25.656-2.694 1.102-4.031 1.67-1.355.574-2.647 1.235-4.034 1.758-1.26.476-2.613.81-3.916 1.224-.85.27-1.672.59-2.524.852-.64.197-1.303.358-1.97.5-1.074.229-2.164.417-3.24.644-1.209.253-2.41.53-3.615.796-.161.036-.323.07-.488.092-1.384.176-2.76.43-4.153.505-4.388.236-8.758.81-13.18.504-2.168-.149-4.33-.341-6.49-.548-1.19-.114-2.383-.251-3.547-.463-1.219-.222-2.4-.557-3.603-.826-.79-.175-1.594-.318-2.391-.48-1.05-.213-2.124-.374-3.139-.659-1.404-.395-2.757-.89-4.137-1.33-.72-.23-1.474-.405-2.175-.663-1.05-.387-2.056-.839-3.1-1.235-.766-.291-1.603-.487-2.338-.814-.953-.424-1.844-.929-2.747-1.414-.828-.445-1.643-.905-2.452-1.37-1.051-.602-2.122-1.187-3.127-1.83-1.352-.866-2.627-1.8-3.993-2.653-.202-.127-.782-.05-1.085.074-1.033.423-2.014.915-3.025 1.369-.806.362-1.609.73-2.443 1.052-1.234.477-2.5.906-3.742 1.372-.752.281-1.464.625-2.23.881-.749.25-1.546.421-2.32.632-.636.172-1.275.339-1.9.531-.875.268-1.729.574-2.607.836-.685.204-1.381.4-2.092.542-1.102.222-2.227.374-3.329.595-1.111.224-2.206.493-3.306.747-.16.037-.305.127-.465.146-1.633.197-3.272.365-4.9.58-1.782.236-3.553.512-5.33.772-.23.034-.459.095-.69.108-6.448.368-12.893.849-19.37.54-2.647-.128-5.288-.33-7.926-.54-1.46-.115-2.944-.218-4.356-.497-2.131-.422-4.285-.687-6.453-.954-1.687-.207-3.324-.652-4.977-1.012-1.36-.296-2.727-.58-4.055-.946-1.495-.413-2.945-.92-4.422-1.372-1.152-.353-2.328-.665-3.473-1.033a78.627 78.627 0 0 1-3.676-1.267 47.508 47.508 0 0 1-3.063-1.282c-1.312-.6-2.537-1.323-3.906-1.83-.774-.287-1.474-.571-2.128-1.003-.705-.466-1.602-.76-2.357-1.188a285.47 285.47 0 0 1-5.182-3.028c-.41-.244-.766-.538-1.116-.788-1.334.453-2.656.922-4.001 1.351-1.06.34-2.141.642-3.225.938-.636.173-1.288.322-1.944.447-1.25.238-2.507.458-3.765.674-1.646.283-3.296.56-4.947.83-.294.049-.6.069-.903.077-2.09.063-4.187.067-6.271.188-3.432.2-6.835-.162-10.252-.236-1.272-.028-2.552-.243-3.8-.463-1.678-.295-3.337-.66-4.989-1.031-1.26-.284-2.52-.58-3.736-.954-1.329-.409-2.604-.917-3.908-1.373-.514-.18-1.054-.32-1.56-.51-1.797-.675-3.666-1.266-5.351-2.075-1.77-.85-3.361-1.91-5.028-2.88-1.185-.69-2.435-1.329-3.532-2.09-1.54-1.071-2.989-2.22-4.433-3.366-1.075-.851-2.146-1.714-3.097-2.643-.835-.816-1.498-1.731-2.24-2.6-.82-.961-1.66-1.913-2.457-2.884-.29-.354-.506-.745-.717-1.132-.51-.937-.985-1.884-1.498-2.82-.577-1.055-1.241-2.086-1.75-3.16-.38-.798-.585-1.644-.846-2.473-.356-1.121-.718-2.242-1.024-3.371-.174-.64-.205-1.303-.367-1.946-.166-.655-.414-1.3-.625-1.95v-7.466z" fill="#231F20"/><path d="M331.262 159.527c-2.159 0-4.331.108-6.473-.036-1.607-.108-3.176-.539-4.761-.827-.164-.03-.323-.076-.487-.103-1.182-.188-2.398-.297-3.54-.58-1.383-.346-2.698-.843-4.05-1.261-.783-.242-1.597-.43-2.367-.69-1.052-.359-2.107-.725-3.103-1.16-1.16-.507-2.726-.243-3.41.595-.606.74-1.3 1.44-1.953 2.16-.927 1.025-1.793 2.087-2.795 3.069-1.142 1.12-2.378 2.187-3.622 3.244-.995.844-2.012 1.68-3.114 2.443-1.114.771-2.329 1.462-3.529 2.16a97.785 97.785 0 0 1-3.755 2.088c-.94.493-1.93.933-2.911 1.377-1.423.643-2.834 1.306-4.3 1.891-1.051.42-2.19.714-3.276 1.088-.803.275-1.585.587-2.378.882a1.564 1.564 0 0 1-.275.083c-1.003.184-2.02.331-3.006.556-1.05.24-2.07.554-3.103.836-.063.017-.122.05-.186.057-1.52.199-3.041.402-4.564.59-2.273.28-4.548.551-6.823.818-.332.04-.673.031-1.008.057-4.225.33-8.392-.303-12.573-.537-1.174-.065-2.471-.19-3.66-.422-1.983-.387-3.91-.935-5.875-1.383-.957-.218-1.967-.314-2.912-.555-.781-.2-1.503-.537-2.255-.806-.599-.215-1.203-.42-1.806-.628-1.549-.534-3.16-.986-4.63-1.624-1.551-.673-2.885-1.646-4.47-2.257-1.165-.449-2.116-1.058-3.125-1.629a50.88 50.88 0 0 1-3.398-2.11c-1.325-.892-2.456-2-3.94-2.687-.793-.367-2.272-.267-3.226.025-1.307.398-2.374 1.22-3.605 1.786-1.809.833-3.65 1.634-5.522 2.384-1.049.42-2.195.698-3.286 1.06-.888.293-1.745.64-2.642.916-.76.233-1.556.4-2.339.589-.967.233-1.935.46-2.905.687-1.208.28-2.419.556-3.628.834-1.18.27-2.36.542-3.54.815-.095.022-.184.066-.281.08-1.481.21-2.962.42-4.444.623-2.039.28-4.079.555-6.118.831-.133.019-.266.04-.4.046-3.758.192-7.514.42-11.276.559a72.128 72.128 0 0 1-5.871-.04c-2.715-.123-5.424-.327-8.13-.53a114.995 114.995 0 0 1-4.464-.448c-1.231-.14-2.495-.225-3.671-.507-1.753-.42-3.502-.786-5.32-1.019-1.054-.135-2.038-.56-3.066-.827-.809-.209-1.65-.348-2.456-.563-1.107-.293-2.19-.633-3.288-.947-1.267-.363-2.547-.7-3.8-1.086-.748-.23-1.424-.63-2.192-.78-1.664-.326-3-1.103-4.46-1.701-1.35-.553-2.614-1.227-3.922-1.84-.796-.373-1.618-.719-2.405-1.103-.757-.37-1.521-.74-2.218-1.17-1.754-1.08-3.467-2.197-5.206-3.291-.645-.407-1.352-.76-1.966-1.191-.757-.533-1.427-.487-2.249-.063-.602.31-1.345.466-2.017.704-1.289.456-2.557.952-3.866 1.375-.815.263-1.688.424-2.535.632-1.13.276-2.26.553-3.388.831-.062.015-.113.058-.174.069-1.136.186-2.268.388-3.41.55-5.816.827-11.693.624-17.55.476-1.877-.048-3.734-.55-5.598-.852-1.225-.197-2.463-.366-3.665-.625-1.023-.22-2.003-.554-3.005-.834-.765-.215-1.556-.385-2.295-.643-1.248-.437-2.456-.936-3.693-1.391-.632-.233-1.305-.402-1.929-.643-.866-.337-1.73-.683-2.547-1.082a31.156 31.156 0 0 1-2.404-1.332c-1.863-1.12-3.765-2.211-5.537-3.408a33.438 33.438 0 0 1-3.804-3.005c-1.02-.933-2.243-1.734-3.02-2.84-.618-.878-1.624-1.596-2.324-2.448-.654-.796-1.113-1.682-1.692-2.516-.565-.812-1.235-1.586-1.742-2.416-.379-.62-.542-1.311-.853-1.957-.311-.65-.684-1.282-1.032-1.922-.025-.046-.074-.087-.088-.135-.3-1.007-.616-2.013-.89-3.024-.386-1.43-.745-2.866-1.105-4.301a2.861 2.861 0 0 1-.08-.682c-.006-2.21-.079-4.42.02-6.626.058-1.248.376-2.492.624-3.733.155-.773.333-1.551.625-2.299.29-.741.773-1.438 1.11-2.17.323-.704.55-1.433.853-2.144.23-.541.464-1.085.776-1.602.589-.978 1.187-1.956 1.87-2.896.559-.77 1.258-1.48 1.874-2.226.74-.897 1.427-1.82 2.2-2.7.344-.392.86-.696 1.269-1.057 1.355-1.196 2.625-2.45 4.066-3.583 1.208-.95 2.57-1.795 3.935-2.62 1.19-.721 2.471-1.358 3.724-2.017 1.485-.78 2.948-1.588 4.489-2.3.933-.431 2-.7 3.002-1.048.874-.301 1.74-.616 2.615-.915.573-.196 1.137-.422 1.738-.549 1.889-.397 3.794-.748 5.69-1.127 1.4-.28 2.78-.632 4.197-.849.982-.149 2.043-.024 3.016-.193 3.3-.572 6.635-.433 9.958-.337 2.038.057 4.078.268 6.092.525 1.249.16 2.46.508 3.667.82.914.236 2.935-.728 3.098-1.451.232-1.037.767-2.035 1.132-3.056.301-.842.494-1.706.828-2.538.28-.694.702-1.355 1.049-2.034.28-.55.542-1.105.816-1.657.48-.964.886-1.953 1.468-2.88.514-.817 1.48-1.51 1.793-2.353.443-1.2 1.688-1.999 2.285-3.114.433-.808 1.272-1.505 1.995-2.215a54.716 54.716 0 0 1 2.511-2.283A282.72 282.72 0 0 1 94.443 58c.98-.815 1.96-1.637 3.028-2.384.88-.616 1.897-1.12 2.844-1.683 1.284-.765 2.531-1.567 3.849-2.298.81-.449 1.728-.787 2.587-1.187.89-.414 1.749-.867 2.657-1.26.976-.42 1.986-.8 2.994-1.179 1.208-.454 2.417-.911 3.65-1.325.783-.263 1.609-.455 2.42-.67.655-.174 1.314-.34 1.978-.5 1.452-.35 2.9-.716 4.365-1.035 2.155-.47 4.323-.904 6.486-1.352.032-.007.065-.016.098-.02 2.037-.194 4.07-.52 6.113-.557 4.486-.084 8.983-.112 13.464.02 2.189.063 4.355.535 6.531.824.2.026.395.065.594.093 1.39.19 2.8.321 4.167.58 1.577.299 3.125.691 4.672 1.075 1.122.278 2.224.6 3.328.916.625.178 1.23.392 1.854.573 1.278.37 2.408.148 3.123-.777.577-.748.906-1.603 1.37-2.403.312-.538.671-1.062 1-1.594.338-.547.65-1.103 1-1.645.558-.863 1.131-1.722 1.715-2.576.496-.725 1.017-1.442 1.53-2.161.274-.386.513-.79.839-1.15 1-1.106 2.043-2.193 3.053-3.295.255-.279.407-.613.678-.881 1.236-1.229 2.45-2.473 3.763-3.654 1.627-1.464 3.285-2.914 5.04-4.291 1.386-1.086 2.97-2.026 4.407-3.076 2.082-1.521 4.409-2.801 6.791-4.033 1.492-.772 2.922-1.615 4.447-2.345 1.498-.717 3.06-1.362 4.634-1.982 1.095-.43 2.257-.763 3.387-1.143 1.877-.632 3.737-1.295 5.637-1.886.87-.27 1.824-.383 2.727-.6 1.1-.263 2.18-.578 3.281-.838.94-.221 1.886-.451 2.852-.579 1.757-.232 3.623-.197 5.27-.638 1.558-.417 3.114-.168 4.606-.44 4.167-.762 8.383-.33 12.574-.359 2.262-.015 4.585.129 6.773.532 1.279.237 2.542.236 3.789.422 1.308.196 2.576.54 3.861.823.128.027.25.073.377.102 1.419.312 2.836.627 4.258.93.964.206 1.955.35 2.895.605.902.243 1.742.615 2.632.889.724.222 1.506.342 2.22.579a56.59 56.59 0 0 1 3.093 1.148c.58.23 1.113.523 1.681.772 1.495.655 3.005 1.292 4.495 1.955 1.583.705 3.2 1.377 4.707 2.166 1.305.682 2.478 1.51 3.71 2.272 1.433.885 2.884 1.755 4.293 2.66a29.287 29.287 0 0 1 2.282 1.636c1.222.963 2.447 1.926 3.59 2.942 1.323 1.176 2.556 2.409 3.83 3.615 1.006.95 2.054 1.876 3.008 2.855.606.622 1.071 1.321 1.603 1.985.506.633 1.032 1.257 1.52 1.897.418.55.8 1.114 1.19 1.676.507.733 1.008 1.47 1.506 2.206.384.566.758 1.136 1.14 1.703.326.486.671.964.979 1.456.341.549.684 1.1.968 1.666.647 1.287 1.292 2.576 1.871 3.882.339.759.54 1.552.821 2.327.265.725.566 1.443.828 2.169.2.551.353 1.113.542 1.666.376 1.097.764 2.193 1.145 3.288.025.074.039.15.052.225.228 1.37.478 2.738.676 4.111.131.917.616 1.133 1.664 1.565 1.347.555 2.731.265 4.071.458 1.75.252 3.476.596 5.214.899.164.028.332.047.5.055 1.455.067 2.751.484 4.05.952.793.287 1.71.37 2.535.617.73.218 1.399.548 2.107.808.578.212 1.181.382 1.76.591 2.216.8 4.36 1.679 6.295 2.847 1.102.665 2.411 1.132 3.548 1.77.818.459 1.519 1.04 2.245 1.586 1.214.913 2.402 1.845 3.609 2.763 1.142.869 2.283 1.724 3.155 2.781.666.806 1.612 1.478 2.377 2.242a18.586 18.586 0 0 1 1.536 1.77c.907 1.167 1.817 2.336 2.646 3.536.76 1.1 1.459 2.226 2.1 3.367.704 1.252 1.285 2.543 1.966 3.802.573 1.064.973 2.155 1.347 3.27.488 1.447.905 2.916 1.454 4.334.498 1.284.177 2.553.555 3.776 1.116 3.604.382 7.244.463 10.864.034 1.533-.365 3.076-.635 4.608a12.758 12.758 0 0 1-.659 2.322c-.32.84-.757 1.655-1.14 2.483-.043.094-.06.197-.095.295-.491 1.373-.949 2.754-1.49 4.116-.345.87-.745 1.735-1.248 2.558-.514.842-1.203 1.622-1.776 2.444-.543.781-.955 1.62-1.568 2.367-.815.994-1.297 2.118-2.45 2.993-.916.694-1.436 1.673-2.227 2.472-.947.96-1.973 1.876-3.006 2.784-.93.818-1.856 1.65-2.894 2.387-1.57 1.116-3.214 2.176-4.871 3.219a63.867 63.867 0 0 1-3.92 2.282c-.796.425-1.709.725-2.555 1.099-.699.308-1.367.655-2.07.96-.456.196-.94.366-1.429.513-1.288.386-2.584.758-3.882 1.127-1.576.447-3.136.934-4.744 1.309-1.195.28-2.474.35-3.678.611-2.946.64-5.968.491-8.97.58-.268.008-.539.001-.809.001v-.1z" fill="#FEFEFE"/>
</g>
</svg>
視覚的に：
非常に白く見えることを心配する必要はありません。背後に空があると、はるかに鮮明に見えます。
これをアニメートするのは非常に簡単です。必要なのは、viewBoxのmin-x値を変更することだけです。
これを実現するために、優れたアニメーションライブラリである Greensock を使用します。この記事の範囲を超えて、どのように機能するかを説明しますが、記事が必要な場合は、Twitterでお知らせください。 。
JavaScriptは次のようになります。
// get a reference to our entire SVG
const cloudSVG = document.querySelector('#cloudSVG');
// animate using a time of 30 seconds our SVG and move the x value to 700
TweenMax.to(cloudSVG, 30, { attr: { viewBox: "700 0 275 325" }});
ご覧のとおり、viewBoxにxの値を700に変更するように指示しており、この時間は30秒に設定されています。 これにより、次のようになります。
あなたはこれをここでチェックすることができます。
結論
preserveAspectRatioは、viewBoxを理解している間、圧倒される可能性があるため、この記事から除外しました。 viewBoxの基本に慣れたら、preserveAspectRatioについて学習して知識を深める必要があります。それについて書きたい場合は、Twitterでもう一度お知らせください。 。
viewBoxを理解するのに役立ったことを願っています。さあ、クールなものを作ってください。
この記事をお読みいただき、ありがとうございます。
