Rectangle 27 1

Old question, but I experienced the same problem, and I found a solution. The spinner has always been there, but it is white, so you can't see it with a white background. To fix this, add following code to your CSS-file, replacing "skyblue" with your choice of color.

.spinner svg {
  stroke: skyblue;
  fill: skyblue;
}
<ion-refresher on-refresh="collectFeed()" pulling-text="Pull to refresh" spinner="ios-small"></ion-refresher>

android - ion-refresher - spinner not showing - Stack Overflow

android angularjs ionic-framework ionic
Rectangle 27 26

The navbar-toggler-icon (hamburger) in Bootstrap 4 uses an SVG background-image. There are 2 "versions" of the toggler icon image. One for a light navbar, and one for a dark (inverse) navbar...

// this is a black icon with 50% opacity
.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;..");
}
// this is a white icon with 50% opacity
.navbar-inverse .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;..");
}

So if you want to change the color of this image to something else, you can customize the icon. For example, here I set the RGB value to pink (255,102,203). Notice the stroke='rgba(255,102,203, 0.5)' value in the SVG data:

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,102,203, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
navbar-inverse
navbar-dark

You are a life saver man :) Thanks!

In Bootstrap 4 beta 1 there is no .navbar-inverse class. you can choose from two classes: .navbar-light or .navbar-dark.

css - Bootstrap 4 Change Hamburger Toggler Color - Stack Overflow

css twitter-bootstrap bootstrap-4 twitter-bootstrap-4
Rectangle 27 3

A clipPath is what you want. You can just clip away everything outside the circle.

<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" onclick='dispcoord(evt)' viewBox="0 0 80 80">
    <defs>
        <clipPath id="clip1">
            <circle cx="40" cy="40" r="39" fill="black" />
        </clipPath>
    </defs>

        <g class="background" stroke-width="3" fill="transparent" clip-path="url(#clip1)">
            <circle cx="40" cy="40" r="39" stroke="black" />
            <path d="M 0,40 A 37,37 0 0,1 12,12" stroke-width="11" stroke="black" transform="rotate(112.5, 40,40)" />
            <path d="M 0,40 A 37,37 0 0,1 12,12" stroke-width="11" stroke="black" transform="rotate(202.5, 40,40)" />
            <path d="M 0,40 A 37,37 0 0,1 12,12" stroke-width="11" stroke="black" transform="rotate(292.5, 40,40)" />
            <path d="M 0,40 A 37,37 0 0,1 12,12" stroke-width="11" stroke="black" transform="rotate(22.5, 40,40)" />
            <circle cx="40" cy="40" r="44" stroke="transparent" stroke-width="7" />
        </g>
</svg>

svg filters - SVG stroke only in one direction - Stack Overflow

svg svg-filters
Rectangle 27 2

The spec says what the defaults are for fill and stroke. I haven't seen any svg viewer that gets that wrong so far. Do you have an example svg?

android - default stroke and fill in SVG - Stack Overflow

android svg fill stroke
Rectangle 27 22

Found this works in Safari. SVG only colors in with background-color where an element's bounding box covers. So, give it a border (stroke) with a zero pixel boundary. It fills in the whole thing for you with your background-color.

<svg style='stroke-width: 0px; background-color: blue;'> </svg>

This causes all sub-element strokes to be zero-width as well, so its not a good "background" option.

Default background color of SVG root element - Stack Overflow

svg
Rectangle 27 1

As Shan suggested, your problem is your use of classList; however, jQuery cannot add a class to an SVG. You can hack your way around this though by setting the class attribute on the <svg>.

You can see this in action by running the snippet below.

$(document).ready(function(){
	
	var prev;       
	$('svg polygon').click(function(){
		var current = this;
		$(this).attr("class", "mouseclick");
		$('#suburb').val(current.id);

		if((typeof prev != 'undefined') && (current != prev)){
			$(prev).attr("class", "");
		}
				   
		prev=current;
	});

	$("#forwardbutton").click(function(){
		document.getElementById("ctlform").submit();
	});

});
svg polygon{
	fill:none;
	stroke: white;
	stroke-width:1px;    
}

svg polygon:hover{
	fill: rgba(255, 255, 0, 0.3);
}

svg polygon.mouseclick{
	fill: rgba(255, 0, 4, 0.3); !important;
	stroke-width: 1px;
	stroke: rgb(255, 0, 4);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form role="form" id="ctlform">
 <div>
<svg height="630" width="840">
<image width="840" height="630" xlink:href="http://choicestudies.com/img/IGA/base.png" />
<polygon points="536,379 535,377 536,374 539,368 541,367 541,363 539,363 540,359 546,362 557,362 559,358 559,359 565,358 568,359 567,363 563,368 564,382 562,386 558,386 554,390 554,392 552,392 551,395 547,397 547,399 545,398 548,392 548,386 546,385 537,386 536,379" id="Ashfield"> 
    <title>Ashfield</title>
</polygon>
<polygon points="437,360 438,358, 437,345 441,337 441,331 439,329 439,326 441,320 452,318 455,317 457,314 468,312 472,304 483,304 483,306 485,307 488,307 493,302 499,304 493,311 493,315 496,316 497,318 496,321 497,324 501,325 501,334 496,339 490,342 486,340 482,341 480,347 480,349 482,349 479,350 479,353 486,363 484,364 482,371 467,377 451,378 447,373 445,373 443,370 441,370 439,367 436,366 437,360" id="Auburn"/>


<polygon points="403,430 405,428 405,425 399,418 399,405 402,405 404,403 404,400 397,394 397,390 393,389 393,383 394,382 399,383 402,372 405,369 406,365 408,364 413,353 421,360 423,360 436,370 438,370 438,372 443,374 451,381 468,380 478,375 480,375 481,380 485,380 486,378 489,377 485,402 489,404 494,404 488,406 486,413 478,422 468,425 467,430 461,431 461,443 462,449 464,450 464,469 467,472 468,476 462,477 456,481 443,483 441,487 438,489 438,491 430,490 430,486 426,486 422,490 420,486 424,483 424,481 417,475 417,473 414,470 406,469 406,464 408,463 407,457 404,455 399,455 395,446 391,445 394,442 393,432 395,432 397,429 399,431 403,430" id="Bankstown"/>

</svg>
</div>

<div>
 <p>Suburb Name:</p><br />
 <input type="text" id="suburb" name="sub"/>

</div>
</form>

wierd! I didn;'t know you couldn't add a class to an svg with jquery. Thanks!

Jquery Javascript only works on chrome and firefox, but not on IE - St...

javascript jquery google-chrome internet-explorer firefox
Rectangle 27 5

You can animate strokes by using a stroke-dasharray that has the length of your circle (2 * PI * r) and a dash offset of equal length. Play around with the animation values of your dash length and offset to create different effects.

Here's an example of how to do so.

.circle:hover {
  /* calculate using: (2 * PI * R) */
  stroke-dasharray: 227;
  stroke-dashoffset: 0;
  animation-iteration-count: infinite;
  animation-name: rotate;
  animation-duration: 2s;
  animation-direction: alternate;
  animation-timing-function: linear;
}

@keyframes rotate {
  to {
    stroke-dashoffset: 227;
  }
}
<svg id="right_arrow" class="direction__right direction__item" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="80px" height="80px" viewBox="0 0 80 80" xml:space="preserve">
  <polygon class="ring offset-colour" points="32.5,52 47.5,40 32.5,28" />
  <circle cx="40" cy="40" r="36" fill="transparent" stroke="black" stroke-width="2" />
  <circle class="circle" cx="40" cy="40" r="36" fill="transparent" stroke="black" stroke-width="4" />
</svg>

Using the css animation property and @keyframes, you can do all kinds of fancy stuff. If you'd rather keep it simple, you could also try using the transition property, like in the example below. Note that I've used the svg transform attribute to change the starting point of the dashed stroke.

.another-circle {
  stroke-dasharray: 227;
  stroke-dashoffset: 227;
  transition: stroke-dashoffset 2s linear;
}
.another-circle:hover {
  stroke-dashoffset: 0;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="80px" height="80px" viewBox="0 0 80 80" xml:space="preserve">
  <polygon class="ring offset-colour" points="32.5,52 47.5,40 32.5,28" />
  <circle cx="40" cy="40" r="36" fill="transparent" stroke="black" stroke-width="2" />
  <circle transform="rotate(-90 40 40)" class="another-circle" cx="40" cy="40" r="36" fill="transparent" stroke="black" stroke-width="4" />
</svg>

Nice answer! I have used transform to bring the starting point to "deg", however is there anyway that we can reverse the animation when the hover state is not initiated? Ideally the stroke should only appear when hover starts.

Thanks. I've included another example that shows a slightly different example that reverses the animation by using a simple transition rather than an elaborate animation. I'm not sure how fancy you need it to be (i.e.: if you need to use animation).

looks sweet, I love the effect when you come off the hover state. However I wanted understand your direction on using inline styles on the svg such as the transform rotate property (why 3 values). I also wanted to understand the correlation between the the stroke 227 value, and how you got to that number.

The inline svg transform can get a bit tricky, but in this case it's quite straight forward: the first value is the rotation in degrees, the second and third value represent the center of rotation (x and y). So, to start at the top of the circle, we rotate 90 degrees (360/4) counter clockwise. We want to rotate around the center of the circle (cx and cy), so those are the second and third values. 227 is just a bit more than the length of the stroke, and can be calculated using: 2 * PI * r, which in this case is 2 * 3.14 * 36 = 226.08

cx, cy, and r are relative to the viewBox. You can scale your <svg> using width and height without changing the viewBox; you won't have to update the circles center or stroke length. I don't think you can use css transforms on inner svg elements, but you'd have to check that in the specs.

javascript - Animated SVG, circle stroke hover - Stack Overflow

javascript css html5 animation svg
Rectangle 27 25

It looks like you're setting the stroke to black? Stroke represents the outer border of the text where fill sets the inner color. Consider using fill instead and setting stroke to none:

.fuzzy {
    stroke: black;
}
.crisp {
    fill: black;
    font-weight: bold;
}

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text class="fuzzy" font-size="10px" x="0" y="15" fill="red">I love SVG</text>
</svg> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text class="crisp" font-size="10px" x="0" y="15" fill="red">I love SVG</text>
</svg>

If this is off the mark, then perhaps a jsFiddle of your own demonstrating the problem would help narrow in on the issue?

since you have a class, why do you use attributes for x and y ... thanks (this post is a little old I know)

@reblace I also have fuzzy font but I do not have stroke set...

@dsdsdsdsd In this instance, mostly just to keep the relevant stuff isolated and concise.

d3.js - SVG text is poor quality? - Stack Overflow

svg d3.js
Rectangle 27 52

body = d3.select('body')
svg = body.append('svg').attr('height', 600).attr('width', 200)
rect = svg.append('rect').transition().duration(500).attr('width', 150)
                .attr('height', 100)
                .attr('x', 40)
                .attr('y', 100)
                .style('fill', 'white')
                .attr('stroke', 'black')
text = svg.append('text').text('This is some information about whatever')
                .attr('x', 50)
                .attr('y', 150)
                .attr('fill', 'black')

This produces markup that displays like OP wants, but it doesn't do what OP is trying to do (which isn't legal). This still produces <svg><rect/><text/></svg>.

SVG: text inside rect - Stack Overflow

text svg rect
Rectangle 27 2

There is no way to do this with just a single path.

You need to use a second path, with a stroke but no fill, to add the thicker of the two strokes.

<svg width="12cm" height="4cm" viewBox="0 0 1200 400">
  <rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" />
  <g fill-rule="evenodd" fill="red" stroke="black" stroke-width="3" >
    <path d="M 950,81 A 107,107 0 0,1 950,295 A 107,107 0 0,1 950,81 z
             M 950,139 A 49,49 0 0,0 950,237 A 49,49 0 0,0 950,139 z" />
    <path d="M 950,139 A 49,49 0 0,0 950,237 A 49,49 0 0,0 950,139 z"
          fill="none" stroke-width="16"/>
  </g>
</svg>

Thanks. I was afraid of that. Unfortunately the thicker line is the complex one, which will increase the size of the svg (which is an icon, so should be small). Oh well.

SVG fill-rule cutout with different stroke widths - Stack Overflow

svg fill
Rectangle 27 17

I am currently using PDFBox which has good support for graphic output. There is good support for extracting the vector strokes and also for managing fonts. There are some good tools for trying it out (e.g. PDFReader will display as Java Graphics2D). You can intercept the graphics tool with an SVG tool like Batik (I do this and it gives good capture).

There is no simple way to convert all PDF to SVG - it depends on the strategy and tools used to create the PDFs. Some text is converted to vectors and cannot be easily reconstructed - you have to install vector fonts and look them up.

UPDATE: I have now developed this into a package PDF2SVG which does not use Batik any more:

which has been tested on a range of PDFs. It produces SVG output consisting of

  • characters as one <svg:text> per character
<svg:path>
<svg:image>

UPDATE: We can now re-create running text from the SVG characters. We've also converted diagrams to domain-specific XML (e.g. chemical spectra). See https://bitbucket.org/petermr/svg2xml-dev. It's still in Alpha, but is moving at a useful speed. Anyone can join in!

UPDATE. (@Tim Kelty) We are continuing to work on PDF2SVG and also downstream tools that do (limited) Java OCR and creation of higher-level graphics primitives (arrows, boxes, etc.) See https://bitbucket.org/petermr/imageanalysis https://bitbucket.org/petermr/diagramanalyzer https://bitbucket.org/petermr/norma and https://bitbucket.org/petermr/ami-core . This is a funded project to capture 100 million facts from the scientific literature (contentmine.org) much of which is PDF.

What a fantastic little utility! Thank you very much for creating this!

Glad you like it. I have now created the second phase bitbucket.org/petermr/svg2xml-dev which recreates structured XML

This looks great, but I have no clue how to use it (not a Java dev).

Would love a tutorial on how to get that working...

Convert PDF to clean SVG? - Stack Overflow

pdf svg
Rectangle 27 17

I am currently using PDFBox which has good support for graphic output. There is good support for extracting the vector strokes and also for managing fonts. There are some good tools for trying it out (e.g. PDFReader will display as Java Graphics2D). You can intercept the graphics tool with an SVG tool like Batik (I do this and it gives good capture).

There is no simple way to convert all PDF to SVG - it depends on the strategy and tools used to create the PDFs. Some text is converted to vectors and cannot be easily reconstructed - you have to install vector fonts and look them up.

UPDATE: I have now developed this into a package PDF2SVG which does not use Batik any more:

which has been tested on a range of PDFs. It produces SVG output consisting of

  • characters as one <svg:text> per character
<svg:path>
<svg:image>

UPDATE: We can now re-create running text from the SVG characters. We've also converted diagrams to domain-specific XML (e.g. chemical spectra). See https://bitbucket.org/petermr/svg2xml-dev. It's still in Alpha, but is moving at a useful speed. Anyone can join in!

UPDATE. (@Tim Kelty) We are continuing to work on PDF2SVG and also downstream tools that do (limited) Java OCR and creation of higher-level graphics primitives (arrows, boxes, etc.) See https://bitbucket.org/petermr/imageanalysis https://bitbucket.org/petermr/diagramanalyzer https://bitbucket.org/petermr/norma and https://bitbucket.org/petermr/ami-core . This is a funded project to capture 100 million facts from the scientific literature (contentmine.org) much of which is PDF.

What a fantastic little utility! Thank you very much for creating this!

Glad you like it. I have now created the second phase bitbucket.org/petermr/svg2xml-dev which recreates structured XML

This looks great, but I have no clue how to use it (not a Java dev).

Would love a tutorial on how to get that working...

Convert PDF to clean SVG? - Stack Overflow

pdf svg
Rectangle 27 5

Clip-paths in svg are meant to be just the shape, not the traits of the shape, so in other words you'll not get the stroke included. What you can do is use a mask instead, setting the stroke of the path in the mask to white.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 600 600">
  <defs>
    <mask id="m0" maskUnits="userSpaceOnUse" x="0" y="0" width="600" height="600">
      <path fill="none" stroke="white" stroke-width="5" d="M 150 300 L 80 300 L 80 370 L 150 370" />
    </mask>
  </defs>

  <path stroke-width="12" fill="none" stroke="#0000ff" d="M 150 300 L 80 300 L 80 370 L 150 370 " />
  <g mask="url(#m0)">
    <rect fill="yellow" x="0" y="0" width="600" height="600" />
  </g>
</svg>

Of course! Stupid of me not to think of this. You're absolutely right, this cured it completely. Many Thanks!

Great solution, but FWIW, the performance of mask seems dramatically worse than clipPath. I assume mask requires rasterization while clipPath is presumably a vector operation.

Can strokes be used as part of clip-paths in SVGs? - Stack Overflow

svg
Rectangle 27 36

There is a shorter alternative to the previous answer. SVG Elements can also be grouped by nesting svg elements:

<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <svg x="10">
    <rect x="10" y="10" height="100" width="100" style="stroke:#ff0000;fill: #0000ff"/>
  </svg>
  <svg x="200">
    <rect x="10" y="10" height="100" width="100" style="stroke:#009900;fill: #00cc00"/>
  </svg>
</svg>

The two rectangles are identical (apart from the colors), but the parent svg elements have different x values.

Right, the SVG element can be a grouping element as well. I wanted to point out that the SVG element implements clipping by default (at least at the moment in Chrome). This means any overflow will not be visible. Unlike the "g" element. Just set overflow="visible" and you're back in business, if this bites you.

It's useful if you want to translate a group of elements with percentages: stackoverflow.com/a/17103928/470117

Are there any drawbacks for using svg instead of g?

SVG Positioning - Stack Overflow

svg
Rectangle 27 1

There's no way to achieve this natively through Raphael, but it could be accomplished by some selective modification of the SVG produced by Raphael. Consider the use of a mask applied to the path. This technique is used to absolutely delicious visual effect here.

Don't forget that you can access the DOM node associated with a Raphael paper object through that paper object's canvas property (I don't know why Baranovskiy chose such a misleading name!). You could use this to interact directly with the SVG in the DOM, though I can't vouch for interactions between Raphael and custom modifications =)

Thanks for the suggestion, Kevin! I'm not doing too much heavy lifting with Raphael anyway, so I can probably stick to SVG. Not supporting IE in this application anyway ;)

javascript - How can I draw a "transparent stroke" with Raphael.js - S...

javascript canvas svg raphael stroke
Rectangle 27 4

SVG is an XML format, so you can fix it with an XML transformation like this:

where svglinewidth.xsl contains the following:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="xml"/>

    <xsl:param name="stroke-width">1px</xsl:param>

    <xsl:template match="*">
        <xsl:copy>
            <xsl:apply-templates select="@*|text()|*"/>
        </xsl:copy>
    </xsl:template>

    <xsl:template match="@style[contains(., 'stroke-width:')]">
        <xsl:variable name="before" select="substring-before(.,'stroke-width:')"/>
        <xsl:variable name="rest" select="substring-after(.,'stroke-width:')"/>
        <xsl:variable name="after" select="substring-after($rest,';')"/>
        <xsl:attribute name="style">
            <xsl:value-of select="$before"/>
            <xsl:text>stroke-width:</xsl:text>
            <xsl:value-of select="$stroke-width"/>
            <xsl:text>;</xsl:text>
            <xsl:value-of select="$after"/>
        </xsl:attribute>
    </xsl:template>

    <xsl:template match="@*|text()">
        <xsl:copy/>
    </xsl:template>

</xsl:stylesheet>

This will replace all occurrences of stroke-width in style attributes with the value stroke-width:1px,

To specify another width, you can pass a parameter to xsltproc like this:

xsltproc is available for almost any platform. Linuxes have it as package, for Unixes see http://xmlsoft.org/XSLT/xsltproc2.html

Update: If you don't want to set a fixed stroke-width, but add something to the stroke-width, the following change will do the job:

<xsl:param name="stroke-width">1</xsl:param>
<xsl:variable name="current" select="substring-before($rest,';')"/>
select
xsl:value-of
$current + $stroke-width
<xsl:value-of select="$current + $stroke-width"/>

This assumes that there is no unit after stroke-width:in the source SVG. In order to be added, both the old value and the increment must be plain numbers.

javascript - Inkscape - how to set stroke style from unix command line...

javascript html svg inkscape
Rectangle 27 2

Feel free to explain further on how you need the connected lines join, an illustration might help.

Have a look at the tubefy examples for how to do variable-width stroking and other neat effects with svg and some scripting.

Thank you for your reply. I added a picture of the problem I am facing, the lines with different strokes are not connected and the endpoints does not align with the other lines

raphael - Different strokes in SVG-subpaths - Stack Overflow

svg raphael
Rectangle 27 14

I slightly modified the answer of opsb and made in support fill for the circle sector. http://codepen.io/anon/pen/AkoGx

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  };
}

function describeArc(x, y, radius, startAngle, endAngle){

    var start = polarToCartesian(x, y, radius, endAngle);
    var end = polarToCartesian(x, y, radius, startAngle);

    var arcSweep = endAngle - startAngle <= 180 ? "0" : "1";

    var d = [
        "M", start.x, start.y, 
        "A", radius, radius, 0, arcSweep, 0, end.x, end.y,
        "L", x,y,
        "L", start.x, start.y
    ].join(" ");

    return d;       
}

document.getElementById("arc1").setAttribute("d", describeArc(200, 400, 100, 0, 220));
<svg>
  <path id="arc1" fill="orange" stroke="#446688" stroke-width="0" />
</svg>

The arc is drawn outside the SVG boundaries. Increase SVG's height and change centerX,centerY to 100 for example.

How to calculate the SVG Path for an arc (of a circle) - Stack Overflo...

svg
Rectangle 27 1

@mlegg, your toggler icon isn't toggling as a result of the id attribute not having the same value as the data-toggler attribute on your button. The code below shows what it should be.

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>


<div class="collapse navbar-collapse" id="navbarCollapse">

As for the styling of the toggle icon, you can with the following code:

.navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

For a thorough understanding of what's happening here, checkout @ZimSystem's answer in this stack overflow question. Ultimately, you have to set the value of the stroke property in the URL of the background-image like so:

stroke='rgba(255,255,255, 1)'

You should update the answer to explain the solution was to add the SVG background image to the custom CSS

Bootstrap 4 navbar toggler not showing - Stack Overflow

bootstrap-4
Rectangle 27 41

In addition to the border-image property, there are a few other ways to create a dashed border with control over the length of the stroke and the distance between them. They are described below:

We can create the dashed border by using a path or a polygon element and setting the stroke-dasharray property. The property takes two parameters where one defines the size of the dash and the other determines the space between them.

  • SVGs by nature are scalable graphics and can adapt to any container dimensions.
  • Can work very well even if there is a border-radius involved. We would just have replace the path with a circle like in this answer (or) convert the path into a circle.
  • Browser support for SVG is pretty good and fallback can be provided using VML for IE8-.
  • When the dimensions of the container do not change proportionately, the paths tend to scale resulting in a change in size of the dash and the space between them (try hovering on the first box in the snippet). This can be controlled by adding vector-effect='non-scaling-stroke' (as in the second box) but the browser support for this property is nil in IE.
.dashed-vector {
  position: relative;
  height: 100px;
  width: 300px;
}
svg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}
path{
  fill: none;
  stroke: blue;
  stroke-width: 5;
  stroke-dasharray: 10, 10;
}
span {
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 10px;
}


/* just for demo */

div{
  margin-bottom: 10px;
  transition: all 1s;
}
div:hover{
  height: 100px;
  width: 400px;
}
<div class='dashed-vector'>
  <svg viewBox='0 0 300 100' preserveAspectRatio='none'>
    <path d='M0,0 300,0 300,100 0,100z' />
  </svg>
  <span>Some content</span>
</div>

<div class='dashed-vector'>
  <svg viewBox='0 0 300 100' preserveAspectRatio='none'>
    <path d='M0,0 300,0 300,100 0,100z' vector-effect='non-scaling-stroke'/>
  </svg>
  <span>Some content</span>
</div>

We can use multiple linear-gradient background images and position them appropriately to create a dashed border effect. This can also be done with a repeating-linear-gradient but there is not much improvement because of using a repeating gradient as we need each gradient to repeat in only one direction.

.dashed-gradient{
  height: 100px;
  width: 200px;
  padding: 10px;
  background-image: linear-gradient(to right, blue 50%, transparent 50%), linear-gradient(to right, blue 50%, transparent 50%), linear-gradient(to bottom, blue 50%, transparent 50%), linear-gradient(to bottom, blue 50%, transparent 50%);
  background-position: left top, left bottom, left top, right top;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 20px 3px, 20px 3px, 3px 20px, 3px 20px;
}

.dashed-repeating-gradient {
  height: 100px;
  width: 200px;
  padding: 10px;
  background-image: repeating-linear-gradient(to right, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to right, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, blue 0%, blue 50%, transparent 50%, transparent 100%);
  background-position: left top, left bottom, left top, right top;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 20px 3px, 20px 3px, 3px 20px, 3px 20px;
}

/* just for demo */

div {
  margin: 10px;
  transition: all 1s;
}
div:hover {
  height: 150px;
  width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='dashed-gradient'>Some content</div>
<div class='dashed-repeating-gradient'>Some content</div>
  • Scalable and can adapt even if the container's dimensions are dynamic.
  • Does not make use of any extra pseudo-elements which means they can be kept aside for any other potential usage.
  • Browser support for linear gradients is comparatively lower and this is a no-go if you want to support IE 9-. Even libraries like CSS3 PIE do not support creation of gradient patterns in IE8-.
border-radius

We can create a small bar (in the shape of the dash) using pseudo-elements and then create multiple box-shadow versions of it to create a border like in the below snippet.

If the dash is a square shape then a single pseudo-element would be enough but if it is a rectangle, we would need one pseudo-element for the top + bottom borders and another for left + right borders. This is because the height and width for the dash on the top border will be different from that on the left.

  • The dimensions of the dash is controllable by changing the dimensions of the pseudo-element. The spacing is controllable by modifying the space between each shadow.
  • A very unique effect can be produced by adding a different color for each box shadow.
  • Since we have to manually set the dimensions of the dash and the spacing, this approach is no good when the dimensions of the parent box is dynamic.
  • IE8 and lower do not support box shadow. However, this can be overcome by using libraries like CSS3 PIE.
  • Can be used with border-radius but positioning them would be very tricky with having to find points on a circle (and possibly even transform).
.dashed-box-shadow{
  position: relative;
  height: 120px;
  width: 120px;
  padding: 10px;
}
.dashed-box-shadow:before{ /* for border top and bottom */
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  height: 3px; /* height of the border top and bottom */
  width: 10px; /* width of the border top and bottom */
  background: blue; /* border color */
  box-shadow: 20px 0px 0px blue, 40px 0px 0px blue, 60px 0px 0px blue, 80px 0px 0px blue, 100px 0px 0px blue, /* top border */
    0px 110px 0px blue, 20px 110px 0px blue, 40px 110px 0px blue, 60px 110px 0px blue, 80px 110px 0px blue, 100px 110px 0px blue; /* bottom border */
}
.dashed-box-shadow:after{ /* for border left and right */
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  height: 10px; /* height of the border left and right */
  width: 3px; /* width of the border left and right */
  background: blue; /* border color */
  box-shadow: 0px 20px 0px blue, 0px 40px 0px blue, 0px 60px 0px blue, 0px 80px 0px blue, 0px 100px 0px blue, /* left border */
    110px 0px 0px blue, 110px 20px 0px blue, 110px 40px 0px blue, 110px 60px 0px blue, 110px 80px 0px blue, 110px 100px 0px blue; /* right border */
}
<div class='dashed-box-shadow'>Some content</div>

css - Control the dashed border stroke length and distance between str...

css css3 border css-shapes