1

I'm trying to use a the clip-path property for an image, and to make it fully compatible with Firefox I need to inline the SVG clipping path and then refer to it in the CSS file using its ID (as described here)

The problem is that once loaded into Wordpress, the CSS property URL gets rewritten by Wordpress, so it cannot find the actual SVG from the page. I write the following:

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

But the full path gets rendered instead (I copy my MAMP URL to clarify):

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

Does anybody know how I could reference that ID in the CSS file to make it work with Wordpress?

Community
  • 1
  • 1
Enzo
  • 143
  • 11

2 Answers2

2

Though it wasn't entirely clear in the question/answer you linked to, you will have to add that clip-path css tidbit in a <style></style> tag inside the single-projects.php template. Basically the svg and the css code have to be in the same file for the css to find the svg by id.

Hopefully this helps. You can find a jsfiddle here (taken from this answer).

Community
  • 1
  • 1
Jalen Davenport
  • 342
  • 2
  • 15
  • I haven't thought about putting the CSS property into the file itself too... Taking into account that the inline SVG is already a bit "messy" and it should not be that way, putting the CSS too didn't come to mind. The problem is that with regular HTML files it works, it's just the WordPress putting the full URL when rendering the files. – Enzo May 02 '17 at 18:50
  • Hmmm I wouldn't think it would work with just plain HTML. Idk maybe I'm just way off the right trail here. – Jalen Davenport May 02 '17 at 18:59
  • with plain html it works... the files i tested it with are a complete mess, else I would upload it to a jsfiddle so you could see it. Thanks either way for your solution! – Enzo May 03 '17 at 08:38
1

Trouble

I was also in same trouble! But I managed to solve the problem today.It may not perfect answer but it'll be useful help,I guess.

It's sure as you said, Wordpress automatically change the ID to URL. (e.g.
clip-path: url('#clip-this'); → https://xxxx/wp-content/themes/my-theme/index.html#clip-this
)

So unless you use plain html without Wordpress,you can't get correct clip-path itself with using the ID.

Answer

Anyway, ID is not available. So I came to think Using ID is not correct solution,but "USING DIRECT PATH-DATA IN CSS" would be solution.

Then I finally get clipped image in wordpress!(and more, using @keyframes rule to change path-data, I could get animated clipped image by svg too!)

How to...

  1. open SVG Code in text editor, find d="",and copy value (in quotes).
    e.g.
    d='M60.5,-15.7C67.8,2.8,55.7,31.4,36.8,43.5C17.9,55.6,-7.9,51,-24.2,38C-40.5,25.1,-47.3,3.7,-41.7,-12.5C-36.1,-28.7,-18,-39.8,4.3,-41.2C26.6,-42.6,53.2,-34.3,60.5,-15.7Z'

  2. paste to clip-path: path("here") instead of clip-path: url("#ID").
    e.g.

clip-path:path('M60.5,-15.7C67.8,2.8,55.7,31.4,36.8,43.5C17.9,55.6,-7.9,51,-24.2,38C-40.5,25.1,-47.3,3.7,-41.7,-12.5C-36.1,-28.7,-18,-39.8,4.3,-41.2C26.6,-42.6,53.2,-34.3,60.5,-15.7Z')

Attention! Not url() but path() value is used. Ploberbly, you can get clipped image at this point.


In addition

Moreover, when you want to get responsive aspect ratio about mask image, you may not use <img>, but use <image /> in <svg>.

eg.

in HTML

instead of <img src="path/to/file.jpg">...

<svg viewbox="0 0 200 200">
  <image xlink:href="path/to/file.jpg" preserveaspectratio="XmidYMid slice" />
</svg>

-When you write this on cutom-html-widget-editor in Wordpress theme customizer-
'viewBox' and 'preserveAspectRatio' attributes prefer to be wrote in lower case like 'viewbox' 'preserveaspectratio' because this Wordpress editor says it may be error or you have to fix it.

-<svg> viewbox's value should be set as same as viewbox’s value of clip shape SVG-
When you want to get right-size of image in any devices, you should set same value in viewbox between clipping <svg> and clipped <svg> (including <image />)
For example,clipping svg having value <svg viewBox=“0 0 500 300”>,you should write same to clipped svg <svg viewbox=“0 0 500 300”><image …


in CSS

image{
    clip-path:path("M123.456,789.........z");
    width:100%;
    height:100%;
    and so on...
}

Anyway,in Wordpress clip-path:url("#id") is not working, clip-path:path("path-data") is working!

村上勝保
  • 11
  • 2