web-dev-qa-db-ja.com

JQueryとCSSを使って外部SVGファイルをスタイル化する

Safe SVGプラグイン を使用してWPサイトでSVGファイルリンクを有効にしました。それと。しかし、私は/ linikngを呼び出している外部ファイルに含まれているSVGパスのスタイルに問題があります。現時点では、次のことができないため、希望する対話機能を作成できません。

  1. 私のカスタムjavascript/jQueryを使って個々のSVGパスにクラスを追加します（これは外部リンクのものではなく、私のすべてのインラインsvgsで動作します）。
  2. jQuery適用クラスを使用して、私のstyle.cssファイル内のSVGパスの塗りつぶし/不透明度を変更します。

インラインSVGを使用すると、jQueryとCSSが動作するように、必要な方法ですべてを制御できます。しかし、Safe SVGプラグインを使用して外部ファイルを使用するとき、私のCSSはpath-elementと対話したり、それらを変更したりするようには見えません。

私はCSSや外部SVGについて、この問題について一般的にそしてWordPressを越えて話す情報を見つけました（例えば this ）、しかし私は疑問に思いました1）私のjQueryスクリプトがパスクラスにアクセスして変更すること、および2）私のCSSがパス要素を変更することを可能にする効率的でシンプルなWordPressベースのソリューションをここに誰かが持っている場合。

私はインラインルートをたどり、手間を省くことを認識していますが、これを独立したSVGファイルでは達成できないかどうかを確認したいのです。

ありがとうございます。

jquerycsssvg
1
CoderScissorhands

私は2つの不完全だが機能的な解決策を見つけました。それぞれ独自の制限があります。

どちらかの解決策を採用する前に、まずあなたのページへのSVGアップロードを有効にする必要があります（WPではデフォルトでは許可されていません）。 Safe SVG 。のようなプラグインを使用してこれを行うことができます。

最後に選択したソリューションは、実際にはjQueryをまったく必要としません。それは " Advanced Custom Fields "（またはACF）と呼ばれる人気のあるWPプラグインを使用してテンプレートにphpを追加することを含みます。 2番目の解決策は、socki03が別の質問で投稿したSVGディスカッションスレッドの1つで見つけたものです（私はたまたまこれを尋ねました）。 SVGinjector というjQueryライブラリを使います。

解決策1： 高度なカスタムフィールド （ACF）

この解決策は、私が実装することを選択したものであり、 このディスカッションスレッドで を見つけました。 （WPダッシュボードにすべてを追加できるのではなく）テンプレートにコードを明示的に追加する必要があるため、理想的ではありません。ですから、この道をたどるなら、テンプレートファイルの編集について少し知っておくべきです。

ACFソリューションの機能

ACFプラグインを適切に設定してコードをテンプレートに配置すると、ダッシュボードにフィールドが表示され、そこからSVGファイルを選択できます。そのSVGは実際にはページの一部であり、CSSで変更可能であり、他のすべての要素が早い段階でロードされるので素晴らしいことです。

実装方法

  1. ACFプラグイン をインストールしてください。

  2. ACFプラグインを使用して、画像のURLを返す画像フィールドを作成する手順に従います。

    2.1。ダッシュボードに行く

    2.2。カスタムフィールドセクションを選択します（これはACFプラグインの一部です）。

    2.3。ページの上部に「フィールドグループ」と表示されているので、その横にある「新規追加」ボタンを選択します。

    2.4。フィールドを作成する

    • ２．４．１。 「フィールド名」を指定して、適切なオプションを選択します。 "field type"オプションには必ず "image"を選択する必要があります。

    • ２．４．２。 「フィールドタイプ」オプションから「image」を選択すると、新しいオプション「Return URL」が表示されます。それはあなたの画像を取得するコードを生成しようとしているのはそのオプションです。 「URLを返す」を選択してください

3. svgを追加したいテンプレートのphpファイルを開きます。

  1. あなたのphpファイルの中で、SVGを出現させたい場所にこのコードを挿入してください：<?php echo file_get_contents( get_field( 'the_svg_field_name_you_designated' ) ); ?>そしてあなたのファイルを保存してください。

  2. WPダッシュボードに戻り、 "pages"に移動して、SVGを表示させたいページの "edit"画面に移動します。これで、 "field name"というフィールドが表示されます。画像を選択するように入力します。

  3. フィールド名の近くにあるボタンをクリックすると、ファイルをナビゲートするよう促します。アップロードしたいSVGファイルに移動して選択します。

  4. 「更新」をクリックしてSVGの挿入を確定します。これでSVGがページの一部としてロードされます。これをCSSで編集/スタイル設定できます。

長所：

SVGを挿入するコードはページのロード時に実行されるので、SVG要素は後で「追加」されるのではなく、ページの基礎の一部になります（他の解決策の問題です）。

短所：

SVGは別のファイルから呼び出され、ページ上の他のコードと組み合わせては意味がないため、すべてのクラスを手動でSVGファイルに挿入する必要があります。つまり、クラスが異なる、同じSVGの2つの異なるバージョンが必要な場合は、2つの異なるファイルを使用します。ただし、テンプレート内の親クラスを編集し、それらのクラスを使用して2つの異なるファイル（たとえば.parentForStyle1 svgと.parentForStyle2 svg）を編集することで、この制限を回避しながら、2つの異なるスタイルのSVGに同じファイルを使用できます。

また、この方法では、他の場合よりもコードをもう少し変更する必要がありますが、それほど悪くありません。

解決策2： SVGインジェクター

DOMに表示され、CSSでスタイル設定可能なSVGを追加できるという点で、これは私が望んでいたことでしたが、1つ問題があります。これはキューに入れられたスクリプトを使用するため、ページが他の要素をロードするまで実行されません。そのため、ページの読み込み中および実行後に、変なシフト/点滅が発生する可能性があります。

SVGinjectorがすること

実装されると、SVGinjectorは以下のことを行います。

  1. img要素として別のSVGファイルを呼び出します。
  2. sVGを解析し、インライン要素としてSVGを挿入するためにJavaScriptを使用します。 DOMに表示されます。
  3. 設計者がCSSを使用して個々のSVGパス/要素を様式化することを可能にします。
  4. imgname__要素をsvgname__要素に変換し、既存のimgname__タグとSVGファイルからのヘッダー情報をすべてSVGタグに結合します。

実装方法

  1. テンプレートファイルで、SVGを描画するimgname__要素にinject-meというクラスを追加し、imgタグでimgname__ではなくdata-srcを使用してSVGファイルをsrcname__にリンクします。これが私が私のテンプレートファイルに入れる実用的なコードです：<img class="funkyLogo inject-me" data-src="<?php echo $logoImg; ?>" alt="logo" />

  2. あなたのカスタムjsと一緒にjsスクリプト "svg-injector.min.js"（これはSVGインジェクタ.Zipファイルにあります）をあなたの "functions.php"にエンキューしてください：

    function mytheme_enqueue_front_page_scripts() {
if( is_front_page() )
{
    wp_enqueue_script( 'myJq', "/js/jquery-1.10.2.min.js", array( 'jquery' ), null, true );
    wp_enqueue_script( 'injectSVG', get_stylesheet_directory_uri() . '/js/svg-injector.min.js', array( 'jquery' ), null, true );
    wp_enqueue_script( 'custom', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ), null, true );


    }
} 
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_front_page_scripts' );

  3. "custom.js"ファイルに次のコードを含めます。

    //For testing in IE8
if (!window.console){ console = {log: function() {}}; };

// Elements to inject
  var mySVGsToInject = document.querySelectorAll('img.inject-me');

// Options
  var injectorOptions = {
    evalScripts: 'once',
    pngFallback: 'assets/png',
    each: function (svg) {
      // Callback after each SVG is injected
      if (svg) console.log('SVG injected: ' + svg.getAttribute('id'));
    }
  };

  // Trigger the injection
  SVGInjector(mySVGsToInject, injectorOptions, function (totalSVGsInjected) {
    // Callback after all SVGs are injected
    console.log('We injected ' + totalSVGsInjected + ' SVG(s)!');
  });

長所：

それは簡単です、imgタグを使います、そしてテンプレートのクラスを編集するのは簡単です

短所：

sVGはページ描画プロセスの後半で描画されるため、ロード中にページに奇妙なレンダリング効果/点滅/変更が生じる可能性があります。私は現在カスタマイザを使用していて、私のSVGを私のヘッダーロゴとして指定しています。おそらくdata-srcタグがWordpressを混乱させているので、SVGのjsが実行される前にテーマは一時的にaltname__タグ内のimgname__指定のテキスト「ロゴ」を表示します。 altname__というテキストを削除すると、SVGがインジェクトされる前にdivが約0.5秒間空になりますが、これによりインジェクション中にページ上で奇妙で望ましくない要素の移動が発生します。

あるいは、問題は、ページを描画するときにjsが実行される順序と関係があるかもしれません。キューに入れられたjsは常にページの読み込み後に実行されることを私は学びました。そのため、読み込みプロセスの最後にこれがjsを介して制御されるという事実は、まばたきを引き起こしているものと思われます。 誰かがSVGインジェクタを使った解決策を提案できても瞬きを引き起こさないのなら、それを見るのはいいでしょう。

1
CoderScissorhands

申し訳ありませんが、SVGの要素はDOMで読み込まれないため、CSSやJavascriptではそれらが認識されないため、不可能です。表示されるのは<img>ブロックだけで、その内容は含まれていません。 SVGを操作できるようにするには、SVGをページにインポートする必要があります。

SVGに関する CSS Tricksの記事 を調べてください。

1
socki03