さまざまなCSSクラスを適用して、AngularプロジェクトのSVG画像を読み込み、表示し、動的に変更する必要があります。
この質問はModernizrライブラリを利用しているため、役に立ちませんでした。避けたいと思います。Angularプロジェクトのhtmlファイルに直接持っている画像dのpathタグのフィールドもコピーしたくありません。それは私が受け入れたくないテキストの壁になるからです。代わりに、次の方法で使用しようとしたng-inline-svgのように、正しい結果を達成するために外部専用ライブラリの使用を受け入れることができます。
<div class="svg1" aria-label="My icon"
[inlineSVG]="'./assets/images/icons/ApplyIcon.svg'">
</div>
次のCSSクラスに挑む：
.svg1 {
color: green;
}
通常のimgタグとして画像を完全にロードしますが、カスタムクラスを適用して画像の色を変更しようとすると、機能しません。
さらに、オブジェクトタグを次のように使用しようとしました。
<div class="col-2">
<object
id="svg1"
data="./assets/images/icons/ApplyIcon.svg"
type="image/svg+xml">
</object>
</div>
しかし、再び、私はCSSのディレクティブを持つオブジェクトタグにクラスを適用した場合color: green;やfill: green;、何も変化するであろう。私が望むことを達成するためのアイデアはありますか？
component.htmlファイルのsvg要素を使用し、[ngClass]ディレクティブを使用して、条件に基づいて内部svgクラスを動的に変更します。
例：
component.ts
data.state = "New" || "In-Progress" || "Completed" // this changes dynamically based on the data
component.html：
<svg <circle class="cls-3" [ngClass] = "{'New': 'blue', 'In-Progress':'orange','Completed':'green'}[data.state]" cx="8.21" cy="8.01" r="2.44" transform="translate(-3.22 8.89) rotate(-48.73)"/></svg> // inner class of svg element
component.css：
.blue {
fill:blue
}
.orange{
fill: orange
}
.green {
fill: green
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加