The problem with SVG icon animations is that they often result in a tiny

I've been working on SVG animations with CSS, and I've encountered an issue where my line drawing animations are causing the top-left corner of any SVG rect (#clipboard-border and #clipboard-clip-border) stroke to be cut off, resulting in an incomplete rectangle.

I've tried adjusting the stroke-dasharray and stroke-dashoffset measurements in the CSS, as well as tweaking sizes and pixel coordinates within the SVG code, but so far, none of these fixes seem to solve the problem. Can anyone offer assistance?

html,
body {
  width: 100%;
  height: 100%;
  background-color: #CECECE;
}
/* CSS styles omitted for brevity */

For more details, please view the animation here on Codepen.

csssvgcss-animationsfrontendpixel

Answer №1

To fix the issue, simply include stroke-linecap: square; in your CSS rules for the SVG element.

svg {
  display: inline-block;
  width: 120px;
  margin: 3% auto;
  padding: 0px 100px;
  stroke-linecap: square;  /* <-- Make sure to add this */
}

For example:

Consider an SVG with two paths where one has a gap in the line due to "butt" line endings, while the other path drawn with "square" line endings looks perfect.

<svg width="250" height="100" viewBox="0 0 250 100">
  <path d="M10 10h80v80h-80v-80" style="stroke:#000; stroke-width:10px; fill:none; stroke-linecap: square;"/>
  <text x="50" y="70" text-anchor="middle">Square</text>
  <path d="M160 10h80v80h-80v-80" style="stroke:#000; stroke-width:10px; fill:none; stroke-linecap: butt;"/>
  <text x="200" y="70" text-anchor="middle">Butt</text>
 </svg>

P.S. Your solution is great! Just a suggestion for next time - try creating a minimal, complete and verifiable example to make troubleshooting easier for others. Thanks!

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

Looking for Protractor CSS functionalities nodes

I tried the code below but am having trouble locating the "Login" text using Protractor: <div _ngcontent-c2="" class="align-center"> <img _ngcontent-c2="" alt="Autoprax" class="ap-logo" src="/images/apLogoSmall.svg" style="width: 100%"> ...

htmlcssangularprotractor

Issues with undesirable spacing in CSS using the display property and table-cell display type

Having trouble grasping the concept of table and table-cell in css? See this example: http://jsfiddle.net/dd7h7/3/. HTML <div class="widget"> <div class="button"> <div class="content"> <div class="icon">A</div> ...

htmlcss

Mobile menu malfunction

I am currently troubleshooting an issue with the mobile version of the menu on my website. I am using php in combination with bootstrap, and for the most part, everything seems to be working correctly. However, the problem arises when trying to access the ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to align an element at the bottom in order to allow it to grow vertically

I have a unique structure on one of my pages that I want to use for a tooltip style behavior. When the "container" element is clicked, the "child" element, which is initially hidden, should appear above the container. However, since the child's height ...

htmlcsspositionalignment

Innovative way to design a menu using HTML, CSS, and JavaScript that dynamically resizes to a specific width

I'm currently working on a website and I'm trying to create a menu with specific width of 700px. However, I'm unsure whether to tackle this using CSS, JavaScript, or a combination of both. Which approach would be the most straightforward for ...

javascriptcssmenuhtml

Place a <p> element at the bottom of a parent <div> that is floating

I am currently facing an issue related to the layout of my webpage. There is a @page media mentioned along with a floating <div> element placed at the top of the page. Inside this <div>, there are an <img> and a <p> tag (which conta ...

csscss-float

Why using the display:none property does not successfully conceal Struts 2 tags such as <s:textfield>

I am curious as to why the div tag is unable to hide the Struts2 tags. I have set up a div that should be hidden on load, and using onChange, I am triggering jQuery to toggle the visibility of the div tag... <%@ taglib prefix="s" uri="/ ...

jquerycssjspstruts2struts-tags

Include "+5" in cases where additional elements cannot be accommodated

I am working on a project where I have a div called ItemsContainer that dynamically renders an array of items (Item) depending on the screen size. While mapping through the array, I want to check if there is enough space to display the current item. If no ...

htmlcssreactjstypescript

The text refuses to line up correctly

I am having trouble aligning my text to the right: #login_status { font-size: 1.2em; text-align: right; display: block; float:right; } Here are the relevant CSS styles: #logo { ...

htmlasp.netcssvisual-studio-2010

Animation not fluid with ReactCSSTransitionGroup

Currently, I am in the process of developing an image carousel that showcases images moving smoothly from right to left. However, despite its functionality, there seems to be a slight jaggedness in the animation that I can't seem to resolve. Interesti ...

javascriptcssreactjsanimationreactcsstransitiongroup

Incorporating external CSS and JS files into your WordPress website

Hello, I am unfamiliar with the Wordpress framework and I am seeking guidance on how to add an external CSS and JS file to my Wordpress page. I have successfully created a new page, but would like to incorporate a CSS and JS file into it. Would creating a ...

javascriptcsswordpress

The styling options for PHP table are limited

I have been assigned a task for homework that involves connecting a MySQL database to our PHP files and displaying the data in an HTML table. Although I have successfully connected to the database, I am facing difficulties styling the table. All other elem ...

phphtmlcss

Tips for adjusting the CSS left property of a class based on the ID of a tag

I am currently working on setting the left property of a class based on the id of a li tag. The li tags are being dynamically generated as shown below: .js var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; ...

jquerycss

How to create a listview with stylish rounded corners in jQuery mobile using CSS?

I'm attempting to customize the appearance of a jQuery mobile listview using CSS by adding a border radius to each item. Although things seem to be working mostly as expected, I've encountered a problem where only the first and last <li>&l ...

jquerycss

Issues arise with the functionality of Zurb Foundation 5 tabs

Utilizing the tabs feature in ZURB Foundation 5, I've noticed that clicking on a tab changes the hash in the URL. However, I actually want to prevent this behavior as I rely on the hash for managing page loads. Although I attempted to use preventDef ...

javascriptjqueryhtmlcsszurb-foundation-5

The current page I'm working on is scrolling sideways, but I prefer a stationary layout without any scrolling

I am currently facing an issue with my webpage scrolling to the right. This behavior is not acceptable as web pages are not supposed to scroll to the right, correct? Could someone assist me in eliminating this unwanted scroll from my page? I have only u ...

htmlcss

The fixed div width suddenly switches to 100% without warning

I'm struggling with a basic design issue. My goal is to align the purple div next to the yellow div. Both of these divs are nested inside the white div, and the white div is enclosed within the blue div. When I float the yellow and purple divs to the ...

htmlcsscss-float

Arrange the elements in an HTML table with the first and last columns on the left and right sides

Is it feasible to have the first and last columns of an HTML table fixed while allowing the middle columns to be scrollable? (This functionality is achievable in jQuery DataTables, but what about a basic HTML table?) ...

htmlcsshtml-tablesticky

A guide on updating progress bar value based on user input

I have an input field and a progress bar that needs to be updated based on the input. The task is to input a number (%) and then display that value in the progress bar upon clicking the "Apply" button (btn-primary). Below is the HTML code provided: < ...

javascriptjquerycssformsprogress-bar

Implement a validation check within a text box by utilizing JQuery

I am attempting to insert a validation symbol (a green check mark) inside a text box once a user fulfills specific criteria. My approach involves using JQuery for implementation. I have made an attempt using Fontawesome icons with the following code, but i ...

jqueryhtmlcssfont-awesome