Tips for adjusting the size of an SVG to match the dimensions of a path

I am trying to use an SVG that displays an arrow

<div style="position: absolute; z-index: 0;">
  <svg
    width="373"
    height="280"
    overflow="auto"
    style="position: absolute; left: 630.922px; top: -305px; pointer-events: none;"
  >
    <path
      d="M 20 260 C 20 260, 334.74671750091653 33.15551891825835, 334.74671750091653 33.15551891825835"
      stroke="CornflowerBlue"
      stroke-dasharray="0 0"
      stroke-width="5"
      fill="transparent"
      pointer-events="visibleStroke"
    ></path>
    <g
      fill="CornflowerBlue"
      pointer-events="auto"
      transform="translate(319.89194405571646,25.37183689162216) rotate(-35.78107386189255) scale(30)"
      opacity="1"
    >
      <animate
        dur="0.4"
        attributeName="opacity"
        from="0"
        to="1"
        begin="indefinite"
        repeatCount="0"
        fill="freeze"
      ></animate>
      <path d="M 0 0 L 1 0.5 L 0 1 L 0.25 0.5 z"></path>
    </g>
  </svg>
</div>

This setup leads to the following outcome:

https://i.sstatic.net/GF4Wu.png

Upon closer inspection of the SVG element, it is apparent that the diagonal arrow maintains a blue background even after the arrowhead has finished. Similarly, the blue background extends beyond the actual width of the arrow. Is it possible to align the SVG's width and height with that of the path? The path is depicted as shown below: https://i.sstatic.net/bArwB.png

If this adjustment is feasible, how can I go about achieving it?

csssvg

Answer №1

To ensure your arrows appear outside the SVG, you can adjust the path data or include a viewBox in the SVG element with coordinates that extend beyond the boundaries of the SVG. Remember to apply overflow: visible to the SVG element as well.

Answer №2

In this particular instance, I have defined a viewBox with dimensions of 500 in width and 300 in height. I chose to create a line extending from the bottom left corner to the top right corner, which I then transformed into a <marker>. To conceal the start and end points of the line, I inserted a stroke-dasharray consisting of segments: 0, 1, 98, and 1 (0 1 98 1). Additionally, I set the path length to 100.

<svg viewBox="0 0 500 300" width="500">
  <defs>
    <marker id="arrow" viewBox="0 0 1 1" refX="1" refY=".5"
      markerWidth="6" markerHeight="6"
      orient="auto-start-reverse">
      <path d="M 0 0 L 1 0.5 L 0 1 L 0.25 0.5 z" fill="CornflowerBlue" />
    </marker>
  </defs>
  <rect width="500" height="300" fill="#eee"/>
  <line x1="0" y1="300" x2="500" y2="0" stroke-dasharray="0 1 98 1"
    pathLength="100" stroke="CornflowerBlue" stroke-width="5" marker-end="url(#arrow)" />
</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

HTML and CSS link conflict

As a beginner in CSS, I am experimenting with creating a simple website using HTML and CSS. However, I have encountered an issue where the links on the left side of my page are being interfered with by a paragraph in the middle section. This causes some of ...

htmlcss

Display the Span in the sidebar when hovering over it

I am currently working on making the menu items in my sidebar hidden by default and only visible when I hover over the sidebar element. .app{ height: 100vh; width: 100vw; } .sidebar { width: 100px; height: 100%; background-color: #060606; tr ...

htmlcss

Setting up the Bootstrap grid structure

Struggling to find the right configuration for this Bootstrap 3 setup... https://i.stack.imgur.com/ZsTdI.png I have an input field, but I'm having trouble placing the image in that position. <div class="row"> <div class="col-sm-4 col-m ...

csshtmltwitter-bootstrapgrid

What could be causing my buttons to malfunction once I've applied padding to the container?

I'm struggling with getting my buttons to appear active. They currently don't have any functionality and lack a hover effect when clicked. Despite my efforts to add effects, nothing seems to change. After experimenting with the CSS, I've no ...

htmlcssbuttonhyperlinkbootstrap-4

Is the code generated by Webflow.com functional and practical?

Recently, I have discovered the wonders of www.webflow.com for creating an admin layout. It excels in generating a flexbox layout based on my PSD design without requiring me to manually code with Gulp. My plan is to further simplify the process by breaki ...

htmlcssflexbox

Increased spacing HTML

Trying to create a footer in HTML, but each time I attempt it ends up with an extra margin on the left side. Here is my current footer code: <div id="footer"> Tester </div> #footer { background-image: url(images/backgroundrpatternf ...

htmlcssmargin

Improving efficiency of basic image carousel in Angular 8

In my Angular 8 app, I am developing a basic carousel without relying on external libraries like jQuery or NgB. Instead, I opted to use pure JS for the task. However, the code seems quite cumbersome and I believe there must be a more efficient way to achie ...

javascriptcssangular

What is the process of displaying text within a link?

I have a basic webpage where I want the text to display from a link. Here is my website: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Encyclopedia</title> <link href="test.css" re ...

javascriptcsshtml

Struggling with adjusting the color scheme on a specific page of my WordPress website

Currently, I'm attempting to customize the colors of my user profile page located at www.wastelandgamers.com/user-profile. My goal is to transform the blue fields into white and change the text within those fields from white to black. While I can ach ...

csswordpress

Generating a Simulation of a Computer Screen Embedded Within a Webpage

I have taken on the task of creating a website for a grant-funded documentary project. In this documentary, one of the characters is depicted as building a website about a specific topic. The idea is to display his computer, which is a hand-drawn graphic b ...

jqueryhtmlcsswordpress

Tips for adjusting image size within CSS Grid to ensure grid fits the width of the page

I'm new to web development and currently learning HTML and CSS. My goal is to create a portfolio page on my website using a 3-column CSS Grid that fits the page width and is centered. I've managed to display the images with margins, but they are ...

csscss-grid

Tips for properly formatting a fixed table header

I'm currently facing an issue with the sticky header style in my data table. I have created a simple Angular component along with a specific directive: sticky.directive.ts @Directive({ selector: '[sticky]' }) export class StickyDirecti ...

htmlcssangularcss-tables

Creating an HTML5 canvas that expands to cover the entire html document

After learning JavaScript, I decided to create a page on Github. Everything seems fine, except that the JS code for canvas doesn't scale to fit the entire HTML page. The particles only bounce off the initial window, leaving empty space when scrolling ...

javascripthtmlcss

What is the best way to incorporate an input bar in a Bootstrap panel header?

When designing a search box in my panel header, I floated both elements to get them onto the same line. Although functional, the vertical alignment of the title is displeasing and I am seeking a way to improve this without drastically changing its size. I ...

htmlcsstwitter-bootstrap

Creating a unique slider using CSS animations and JavaScript

After hours of research, I have hit a roadblock with my custom slider project. I am reaching out to fellow developers for help and hoping that my experience can benefit others facing a similar challenge. The goal is to create a custom slider with animated ...

javascriptjqueryhtmlcssanimation

Manage the orientation of the text for entering dates

I need to customize a textfield to enter dates in the format of yyyy/MM/dd. The input direction is set to rtl. However, when I enter the day, then month, and then year, the final displayed values show up as dd/MM/yyyy, as shown in the image attached: My g ...

javascripthtmlcss

The text next to images is being clipped (is it CSS?)

Encountering a problem with CSS on my Wordpress websites. Using WP's editor to float images to the right or left of text, I noticed an issue when viewed on mobile: https://i.sstatic.net/gVFRq.jpg The text gets cut off. How can I ensure that no tex ...

csswordpress

Positioning an icon in HTML using CSS

I have a question about aligning an icon. I've been trying to center it at the end of the bar without success. Here's a link to see what I'm talking about: However, when I add the CSS code top: 5px;, the alignment gets messed up. Here' ...

htmlcss

"Enhance Navigation: Sublevel Dropdowns with the Power of Twitter

Here is a link to my fiddle: http://jsfiddle.net/xkXdy/ I am trying to create submenus for the dropdown input box in my project. Currently, it only shows the category, but I want it to display subcategories when hovered over. The dropdown functionality wo ...

jquerycsstwittertwitter-bootstrap

The search bar is visible on desktop screens and can be expanded on mobile devices

Check out my code snippet below. <style> #searchformfix { width: 50%; border-right: 1px solid #E5E5E5; border-left: 1px solid #E5E5E5; position: relative; background: #fff; height: 40px; display: inline-block; border: ...

javascriptjquerycsssearchbar