SVG (basic support), SVG effects for HTML, or SVG filters?

HTML & CSS
1

What exactly is this considered?

This is clipPath

  <svg width="260" height="194">
    <defs>
      <clipPath id="circleView">
        <circle cx="50%" cy="50%" r="85" transform="translate(90 90)" fill="orange"></circle>
      </clipPath>
    </defs>
    <image x="50%" y="50%" transform="translate(-90 -90)" width="180" height="180" xlink:href="https://i.imgur.com/BO6KOvw.jpg" clip-path="url(#circleView)"></image>
    <image x="50%" y="50%" transform="translate(-90 -90)" width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png"></image>
  </svg>
2

If you actually read the two resources you linked you will find:-

SVG (basic support)

Method of displaying basic Vector Graphics features using the embed or object elements. Refers to the SVG 1.1 spec.

and…

Scalable Vector Graphics (SVG) 1.1 (Second Edition)

The definition of <clipPath> in that specification.

3 Likes
3

And now it’s linked to 3, which one does it use?

https://caniuse.com/#feat=svg-filters

4

Sorry - you’ll need to explain more clearly.

What is “linked to 3”?

What do you mean by “which one does it use?”

5

The svg tag in here is considered what?

  <svg width="260" height="194">
    <defs>
      <clipPath id="circleView">
        <circle cx="50%" cy="50%" r="85" transform="translate(90 90)" fill="orange"></circle>
      </clipPath>
    </defs>
    <image x="50%" y="50%" transform="translate(-90 -90)" width="180" height="180" xlink:href="https://i.imgur.com/BO6KOvw.jpg" clip-path="url(#circleView)"></image>
    <image x="50%" y="50%" transform="translate(-90 -90)" width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png"></image>
  </svg>
6
1 Like
7

Thank you.

Upon further review, I didn’t know there were more than 3.

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.