What is the reason the <line> tag is not functioning properly when used within the <clipPath> element?

Here's an example using: <circle>

<svg viewBox="-20 -20 150 150" xmlns="http://www.w3.org/2000/svg">
  <clipPath id="myClip" clipPathUnits="objectBoundingBox">
    <circle cx=".5" cy=".5" r=".5" />
  </clipPath>
  <rect x="0" width="100" height="100" rx="15" clip-path="url(#myClip)" />
</svg>

Trying the same approach with <line> - it doesn't seem to work

<svg viewBox="-20 -20 150 150" xmlns="http://www.w3.org/2000/svg">
  <clipPath id="myClip" clipPathUnits="objectBoundingBox">
    <line x1="0" y1="0" x2="1" y2="1" />
  </clipPath>
  <rect x="0" width="100" height="100" rx="15" clip-path="url(#myClip)" />
</svg>

Expected to see part of the rectangle, but nothing is showing up

It appears that <line> cannot be used within a <clipPath>

htmlcsssvg

Answer №1

Instead of using clippath, consider utilizing a <mask> as an alternative. One of the benefits is that you have the ability to "paint" with any SVG element.

<svg height="80vh" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <mask id="m1" maskContentUnits="objectBoundingBox">
    <line x1="0" y1="0" x2="1" y2="1" stroke="white" stroke-width=".5" />
  </mask>
  <rect width="100" height="100" rx="15" mask="url(#m1)" />
</svg>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to locate a div element using CSS selector in Selenium WebDriver with Ruby

My experience with CSS selectors in selenium webdriver has been positive, but I am facing difficulty in locating the element within the following div. <div class="class1 class2" dd:btnfloatingstyle="top-right" dd:entitytexttype="resultval" id="_78891a3 ...

htmlrubycss-selectorsselenium-webdriverweb-testing

Unable to click on hyperlink and image not adjusting in size

I am having an issue with the anchor tags inside a div. For some reason, the width and height are set to 0px, and I have tried to adjust them with no success. Each dot in my onepage scroller is meant to navigate to a different page. .dotstyle-scaleup{ f ...

htmlcss

Error: Issue with parsing integer in JavaScript

I'm in the process of developing a dice game that involves rolling two dice and determining the sum. The goal is to display the running total next to the dice. However, I'm encountering an issue where NaN (Not a Number) is being displayed. Here i ...

javascripthtmlnanparseint

Create an HTML table with a line separating two table cells

I need help with creating a table row and td's dynamically using basic HTML and CSS. I would like to draw lines between the td's similar to the example image shown below. Can someone please assist me in achieving this? https://i.sstatic.net/GPd ...

javascripthtmlcss

Problem with animated text in CSS

I am facing an issue with the code below. It is supposed to display "Dedicated People" when scrolling down, however, it is not working in my browser. Could it be that I forgot to include a reference in the head section? The code works fine in CodePen, but ...

javascripthtmlcssanimationtext

Find and make adjustments to the primary HTML document in your Magento online shop

Trying to enhance the top banner of my Magento website tamween.biz by adding a shadow effect PNG picture. Successfully managed this on my local server using firebug and creating a new class in the coding area with all selector properties modified in the bo ...

htmlmagentolocate

The file reader feature is currently experiencing issues on both Chrome and Internet Explorer browsers

After uploading an image file from my PC, I convert it to a data URL and then use the img element to preview it. Surprisingly, this process works perfectly fine in Firefox. However, when I try to do the same in Chrome or IE, the src attribute of the img el ...

javascripthtmlfile-uploadfilereader

Ways to incorporate bold, unbold, and italic styles into a single heading text within the same line using Bootstrap 4

Is there a way to format a single line of text with certain words bolded and the rest regular? I have a specific example pictured here: Picture of my Issue Specifically, I'm looking to bold "Honors:" and "Capstone:", while keeping the surrounding tex ...

htmlcsstwitter-bootstraptwitter-bootstrap-4

Is there a quicker alternative to jQuery's .load() method?

My JSP index page features a navigation header and notifications panel, with other JSP pages being loaded into a specified div using JQuery.load(). This method was utilized to prevent the duplication of navigation and notifications across all pages. Wou ...

jqueryhtmlajaxjspweb-applications

"Creating dynamic web apps with the powerful duo of Meteor and Zurb

Just starting out with programming and currently working on a new web application using Meteor and AngularJS. I would like to incorporate the elements/css from 'Zurb Foundation For Apps' into my project... I am familiar with including Bootstrap ...

javascriptcssangularjsmeteorzurb-foundation-apps

JQuery is failing to locate elements that have dynamic data titles assigned to them

I've been attempting to locate an element using a jQuery regex comparison in the data title. My situation involves having divs with the class .textbox, each containing a dynamically generated data title. To target specific boxes with that particular d ...

jqueryhtmlfindarabic

Ways to access the scrollTop attribute during active user scrolling

I've been working on a website that utilizes AJAX to keep a chat section updated in real-time. One issue I encountered was ensuring the chat automatically scrolled to the bottom when a user sent a message, but remained scrollable while new messages we ...

javascriptjqueryhtmlajax

SB Admin 2 menu with multiple levels does not collapse as expected

I'm in the process of integrating the menu from the sb admin 2 template into my Ruby on Rails application: As I gradually added components to test functionality, I successfully implemented the top and side nav bars. However, I encountered an issue wi ...

javascripthtmlcssruby-on-railstwitter-bootstrap

Tips for aligning items at both ends using flexbox

I have a td containing two div elements, and my goal is to align these div at opposite ends. <td class="lefts"> <div> <h4>VOUCHER </h4> <h4>DATE TIME </h4> <h4>SALESMAN</h4> ...

htmlcssflexboxalignment

I'm looking for assistance on programmatically adding or modifying the user-agent header in a Chrome browser using Selenium WebDriver. Can anyone help

Seeking assistance on programmatically adding or modifying the user-agent header for Chrome browser using Selenium WebDriver. File addonpath = new File("D:\\innpjfdalfhpcoinfnehdnbkglpmogdi_20452.crx"); ChromeOptions chrome = new ChromeOptions( ...

javajavascripthtmlseleniumtestng

closing the space between rows at the top

Having trouble adjusting the top margin to match the left and right margins between items. How can I narrow the top gap so it aligns with the spacing of each bootstrap button? https://i.stack.imgur.com/1dZEC.jpg html <div ng-controller="RecipeCo ...

csstwitter-bootstrap

Mobile phone web development using HTML5

I am currently facing an issue with playing sound on mobile browsers. In my code snippet, I have the following: Response.Write("<embed height='0' width='0' src='Ses.wav' />"); While this works perfectly fine on desktop ...

javascripthtmlaudiomobile

Issues arise when setting a delay for CSS transitions to occur due to the

I'm trying to create a scroll bar that only appears when hovered over, similar to how it works on Facebook where the scroll bar shows up slowly instead of all at once. I've tried using CSS transition delay, but it doesn't seem to be working ...

htmlcss

Ensure that the input box expands to occupy the entire HTML page

After reviewing numerous pages and questions related to this topic, I have located the correct solution but am struggling to implement it. My goal is to achieve a similar outcome to the second question, but I'm having difficulty figuring out how to do ...

javascripthtmlcss

Unable to define the color of icons path using CSS in Vue 3

When using the iconify library for VueJS, the icons' paths automatically have "currentColor" as their fill color. The issue arises when trying to set a path's color via CSS, as it seems to be ineffective. Even with "!important", the color won&apo ...

cssvue.jssvgtailwind-css