タグ付けされた質問 「svg」

スプラッシュスクリーンにVectorDrawableを表示したい <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@android:color/white" android:gravity="fill" /> <item android:drawable="@drawable/splash_screen" android:gravity="bottom|center" /> </layer-list> 私のSVGが持っているandroid:width="320dp"とandroid:height="238dp" <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="320dp" android:height="238dp" android:viewportWidth="320" android:viewportHeight="238"> <group> <clip-path android:pathData="M0,0h320v238h-320z M 0,0"/> <path android:pathData="M0,143.311a160,4.476 0,1 0,320 0a160,4.476 0,1 0,-320 0z" android:fillColor="#E6E6E6"/> <path android:pathData="M245.269,94.815C245.067,94.818 244.865,94.821 244.66,94.821C244.455,94.821 244.253,94.818 244.051,94.815C233.341,94.572 225.578,87.88 227.554,80.859L232.372,63.73L233.59,59.396L255.177,59.764L256.488,64.004L261.653,80.693C263.839,87.753 256.076,94.572 245.269,94.815Z" android:fillColor="#3F3D56"/> <path android:pathData="M256.488,64.004C248.993,68.288 239.768,68.184 …

11 android  svg  splash-screen  android-vectordrawable 

トレジャーマップアニメーションを作成しました。最初に、パスは薄い灰色で表示されますが、アニメーションが始まると、塗りつぶしアニメーション ".road"が開始されると薄い灰色のダッシュが消えるか、黒色に変わります。私は塗りつぶしアニメーションがその位置を通過するときに、薄い灰色のダッシュ「.steps」が消えるのに苦労しています。 svg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .road { stroke-dasharray: 744; stroke-dashoffset: -744; animation: draw-road 10s infinite; } .steps { stroke-dasharray: -744; stroke-dashoffset: 744; animation: draw-steps 10s reverse; } @keyframes draw-road { 0% { stroke-dashoffset: 744; stroke: #000000; } 100% …

9 css  svg 

私はそのようなコードを持っています： .img-container { width: 300px; height: 300px; background-color: lightgreen; overflow: hidden; } .clipped-img { clip-path: url('#header-clip-svg'); } <div class="img-container"> <!--clipping SVG--> <svg height="0" width="0"> <defs> <clipPath id="header-clip-svg"> <path d="M199.6,18.9c-4.3-8.9-12.5-16.4-22.3-17.8c-11.9-1.7-23.1,5.4-32.2,13.2c-9.1,7.8-17.8,16.8-29.3,20.3c-20.5,6.2-41.7-7.4-63.1-7.5C38.7,27,24.8,33,15.2,43.3c-35.5,38.2-0.1,99.4,40.6,116.2c32.8,13.6,72.1,5.9,100.9-15c27.4-19.9,44.3-54.9,47.4-88.6c0.2-2.7,0.4-5.3,0.5-7.9C204.8,38,203.9,27.8,199.6,18.9z"></path> </clipPath> </defs> </svg> <!-- clipped image--> <img class="clipped-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3341051/team.jpg"/> </div> コードスニペットを実行するHide resultsスニペットを展開 クリッピングシェイプのサイズを増やして、緑色の領域の幅になるようにします。これを達成する方法はありますか？

8 css  svg  clip-path 

次の例では、円はグリッドの幅に適応し、アスペクト比を維持しています。コンテナの幅が縮小すると、円もそれに伴って縮小します... ただし、高さが幅よりも小さい場合（2番目のボックス）、円はグリッドの外側のオーバーラップを縮小しません。代わりに、アスペクト比を維持しながら高さにも適応させる方法はありますか？ .container { display: grid; background-color: greenyellow; margin: 5px; min-height: 10px; min-width: 10px; } .portrait { max-height: 100px; max-width: 200px; } .landscape { max-height: 200px; max-width: 100px; } .aspect-ratio { grid-column: 1; grid-row: 1; background-color: deeppink; border-radius: 50%; align-self: center; justify-self: center; } <div class="container landscape"> <svg class="aspect-ratio" viewBox="0 …

8 html  css  svg  css-grid  aspect-ratio 

反応ネイティブアプリで確認画面を表示しようとしています。ユーザーがアクションを確認するために楕円をトレースする必要があります。今夜のホテルのロゴと同じです。ユーザーにsvgをトレースさせるために使用できるライブラリはありますか？ ユーザーが行うことの例を次に示します。

8 react-native  svg  touch