Wordpress CSSとインラインSVG

イメージのクリップパスプロパティを使用して、それをFirefoxと完全に互換性を持たせようとしています。SVGクリッピングパスをインライン化してからCSSファイルで参照する必要がありますそのID（as described here）Wordpress CSSとインラインSVG

Wordpressにロードされると、CSSプロパティのURLがWordpressによって書き換えられるため、ページから実際のSVGを見つけることができないという問題があります。

clip-path: url("#clipping");

しかし、フルパスが（私は明確にするために私のMAMPのURLをコピー）の代わりにレンダリングされる：私は、次のように記述

clip-path: url("http://enzuelo:8888/wp-content/themes/enzuelo-child/single-projects.php#clipping");

誰が私はCSSファイルでそのIDを参照することができる方法を知っていますそれはWordpressで動作させる？

出典

2017-05-02 Enzo

あなたがリンクしている質問/回答で完全にはっきりしていませんが、single-projects.phpテンプレート内の<style></style>タグにそのclip-path css tidbitを追加する必要があります。基本的には、svgとcssコードは、同じファイル内にあり、svgを見つけるにはidでなければなりません。

うまくいけば、これが役に立ちます。 here（this answerから取得）を見つけることができます。

出典

2017-05-02 15:41:43

私はCSSのプロパティをファイル自体に入れすぎるとは考えていません...インラインSVGはすでにちょっと "厄介"であり、そのようにすべきではないことを考慮に入れて、思い浮かぶ。問題は、通常のHTMLファイルでは機能していることです。ファイルをレンダリングするときは、WordPressが完全なURLを入力するだけです。 – Enzo

ええと私はそれが単純なHTMLではうまくいかないと思います。 Idkたぶん私はちょうどここの右の道から離れている。 –

はプレーンhtmlで動作します。テストしたファイルは完全に混乱しています。それ以外の場合はjsfiddleにアップロードして、それを見ることができます。どちらの方もあなたのソリューションに感謝します！ – Enzo

Wordpress CSSとインラインSVG

答えて

関連する問題