[解決済み] SVGサークル内の画像にボーダーを追加する方法
2022-02-07 02:54:49
質問
GSAPを使って円の周りにストロークをアニメートしています。以下は コードペン .
外側のピンクと内側の円形の画像(であるべきもの)の間に、このように間隔を空けたいのです。
以下は私のSVGコードです。
<svg id='svg1' width='48' height='48' viewBox='0 0 48 48'>
<defs>
<clipPath id='circleView'>
<circle cx='24' cy='24' r='22' fill='none' stroke='#FF62E1' strokeWidth='2' />
</clipPath>
</defs>
<image
width='100%'
height='100%'
xlinkHref={'https://source.unsplash.com/random'}
clipPath='url(#circleView)'
/>
<circle
cx='24'
cy='24'
r='22'
fill='none'
stroke='#FF62E1'
strokeWidth='2'
strokeDasharray='100.48'
strokeDashoffset='100.48'
// @ts-ignore
ref={(circle) => { this.circle = circle }} >
>
</circle>
</svg>
で遊んだことがあります。
filter
を使用したり、複数の円を使用して効果を得ることができますが、効果はありません。
これを実現するためのアイデアがあれば教えてください。
どのように解決するのですか?
クリップパスの円の半径を他の円より少し小さくして、正方形の画像を使用すると、ぴったり合うと思います。
render() {
return (
<svg id='svg1' viewBox='0 0 48 48'>
<defs>
<clipPath id='circleView'>
<circle cx='24' cy='24' r='18' fill='none' stroke='#FF62E1' strokeWidth='2' />
</clipPath>
</defs>
<image
x="0"
y="0"
width='48'
height='48'
xlinkHref={'https://source.unsplash.com/random/1500x1500/'}
clipPath='url(#circleView)'
/>
<circle
cx='24'
cy='24'
r='22'
fill='none'
stroke='#FF62E1'
strokeWidth='2'
// @ts-ignore
ref={(circle) => { this.circle = circle }} >
</circle>
</svg>
)
}
}
このオプションは、背景が見える透明な隙間を残すので、正確にあなたが望むものであるかどうかはわかりません。別の方法として、ストロークとフィルがない円を別の半径で再度作成することもできます。
関連
-
[解決済み] error 'document' is not defined : eslint / React
-
[解決済み] マテリアルUIセレクトフィールドのマルチセレクト
-
[解決済み] ReactJS: Warning: setState(...): 既存の状態遷移の間に更新することはできません
-
[解決済み] componentWillReceiveProps は名称が変更されました。
-
[解決済み] react.jsでng-ifに相当するものは何ですか?
-
[解決済み] プロップ `history` は `Router` で必須とマークされているが、その値は `undefined` である。
-
[解決済み] componentWillReceivePropsライフサイクルメソッドはいつ使用するのですか?
-
[解決済み] create-react-appビルドスクリプトを実行する際に、ビルド.env変数を設定するには?
-
[解決済み] svg要素の色を変更するには?
-
[解決済み] CSSを使用してSVG画像の色を変更する方法(jQuery SVG image replacement)とは?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] FontAwesomeの無料パッケージに含まれているアイコンのオブジェクト名はどこにあるのですか?
-
[解決済み] material-ui-pickers KeyboardDatePicker をモーメントで使用するには?
-
[解決済み] react router dom v4でwebpack dev serverを構成する方法は?
-
[解決済み] react nativeで関数だらけのヘルパーファイルを作成する方法は?
-
[解決済み] React JS Jestで「SyntaxError: 予期しないトークン"
-
[解決済み] reactstrapのドロップダウンで選択されたアイテムを設定する方法は?
-
[解決済み] nginxでcertbotを使用する際の問題点
-
[解決済み] プロップ `history` は `Router` で必須とマークされているが、その値は `undefined` である。
-
[解決済み] ReactコンポーネントのJest SnapshotテストにおけるSnapshotテストの仕組みとtoMatchSnapshot()関数は何をするのか?
-
[解決済み] Cross-envでyarnの実行時にenv変数が変更されない。