question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

svg with clip-path doesn't display

See original GitHub issue

I have an svg which includes a clip-path. When using it with this loader is doesn’t display.

<svg>
  <defs>
    <clipPath id="mask">
      <circle cx="166.201" cy="166.201" r="166.201"/>
    </clipPath>
  </defs>
  <g clip-path="url(#mask)">
    ...
  </g>
</svg>

When debugging this I found that if I remove visibility: hidden from the injected svg with all the symbols it displays correctly. Is visibility: hidden needed?

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:10 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
kisenkacommented, Dec 9, 2016

@badtant please check 0.1.1 version

0reactions
badtantcommented, Oct 18, 2016

This is snippet I use for screen reader only content and have never experienced problems with it.

  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;

I tried it on the svg and it works so probably safer to use that!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Why is my clip-path not working when it's source is an svg?
And I've tried that, but it doesn't work. The clip-path property works with predefined methods like polygon() and ellipse() but it won't work ......
Read more >
Unfortunately, clip-path: path() is Still a No-Go - CSS-Tricks
In the SVG case, these pixels scale with the viewBox of the <svg> element but they don't scale at all inside the CSS...
Read more >
clip-path - CSS: Cascading Style Sheets - MDN Web Docs
The clip-path CSS property creates a clipping region that sets what ... Defines a polygon using an SVG filling rule and a set...
Read more >
Hiding and Showing in SVG with Clip-path and Mask
SVG opens up a lot of visual possibilities. A big part of that is using clip-path and mask to hide and show images....
Read more >
Clipping in CSS and SVG — The clip-path Property and ...
The clip-path property is used to specify a clipping path that is to be applied to an element. Using clip-path , you can...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found