Repeating an inline svg pattern - svg

How is this done?
Code:
https://jsfiddle.net/p1rwuzf8/1/
This pattern svg when repeated.
https://i.imgur.com/sTACtMT.png
Should look like this.
https://i.imgur.com/E68BQFo.png
svg {
background-repeat: repeat;
}
<svg width="42" height="44" viewBox="0 0 42 44" xmlns="http://www.w3.org/2000/svg"><g id="Page-1" fill="none" fill-rule="evenodd"><g id="brick-wall" fill="#000"><path d="M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z"/></g></g>


One way of doing this would be using the image as background-image. For this you would need first to encode the svg image, for example using this tool: SVG encoder
div{width:200px;
height:300px;
border:1px solid;
background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23000'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");}
<div></div>
An other way of doing it would be using SVG patterns. For this you need to take the group used to draw the "brick" and use it in a pattern like so:
<svg width="200" height="300" viewBox="0 0 200 300">
<defs>
<pattern id="brick" width='42' height='44' patternUnits='userSpaceOnUse'> >
<g id="Page-1" fill="none" fill-rule="evenodd"><g id="brick-wall" fill="#000"><path d="M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z"/></g></g>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#brick)"></rect>
</svg>

Related

How inherit stroke color in SVG? (Not fill, but stroke color)

I have an .SVG where I call with <img src="/image/arrow.svg" alt="Arrow">. Everything is good, but I would like to dynamically set a different stroke color (Not fill color...) for my SVG like <img ... style="color:red">. I read that I could use fill="currentColor" on my path,but how could I do for my stroke color?
My SVG file:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="100" width="100">
<path d="M20 10 H90 V80" fill="transparent" stroke="currentColor" stroke-width="20" stroke-linecap="round"></path>
<path d="M10 90 L100 0" fill="transparent" stroke="currentColor" stroke-width="20" stroke-linecap="round"></path>
</svg>
My html:
<img src="/image/arrow.svg" alt="Arrow" style="color:red">

As Robert Lognson correctly stated, and previously discussed on StackOverflow, svg used as an image element has a new image context, thus it does not use the document's styles, whereas an inline svg element does use them.
So the following example works:
svg.red {
color: red;
}
<svg class="red" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="100" width="100">
<path d="M20 10 H90 V80" fill="transparent" stroke="currentColor" stroke-width="20" stroke-linecap="round"></path>
<path d="M10 90 L100 0" fill="transparent" stroke="currentColor" stroke-width="20" stroke-linecap="round"></path>
</svg>

Origin of CSS transform for svg:use

Is there a way to set the origin of CSS animation (transform - rotation) relatively to x,y of the element <use/> with CSS?
There might be several <use/> in a given <svg/> at different places:
absolute position of each element might not be hard coded in CSS.
.spin {
transition:4s linear;
-webkit-transition:4s linear;
}
.spin:hover {
transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
transform:rotateZ(360eg);
-webkit-transform:rotateZ(360deg);
}
<body>
<svg width="200" height="200" viewBox="0 0 200 200" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<defs>
<path id="shape1" d="M0,0 V20 H20 Z" fill="red" stroke="red" stroke-width="0" />
</defs>
<circle cx="0" cy="0" r="80" fill="none" stroke="green"/>
<use xlink:href="#shape1" x="40" y="40" class="spin" />
</svg>
</body>

Animating the transform of a <use> is complicated by the fact that you are using the x and y attributes. The spec says that:
The x and y properties define an additional transformation (translate(x,y), ...
This extra transform component can mess with the transform you are animating, and produce unexpected effects.
The simple fix is to remove the x and y attributes, and use a parent <g> element to set the position of the path.
<g transform="translate(40,40)">
<use xlink:href="#shape1" class="spin" />
</g>
Updated example
.spin {
transition:4s linear;
-webkit-transition:4s linear;
}
.spin:hover {
transform-origin: 0px 0px;
-webkit-transform-origin: 0px 0px;
transform:rotateZ(360eg);
-webkit-transform:rotateZ(360deg);
}
<body>
<svg width="200" height="200" viewBox="0 0 200 200" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<defs>
<path id="shape1" d="M0,0 V20 H20 Z" fill="red" stroke="red" stroke-width="0" />
</defs>
<circle cx="0" cy="0" r="80" fill="none" stroke="green"/>
<g transform="translate(40,40)">
<use xlink:href="#shape1" class="spin" />
</g>
</svg>
</body>

Growing svg with fixed-size elements?

I have an arrow SVG, set up like this one:
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 100 100" class="arrow">
<g class="tail">
<circle (...)></circle>
</g>
<g class="body">
<rect (...)></rect>
</g>
<g class="head">
<polygon (...)>
</g>
</svg>
And I want to set it up so that when resizing it via CSS, regardless of its size,
the tail will remain in the left hand side with the same proportions,
the head will stay in the right hand side, also with the same proportions, and
the body will stretch horizontally indefinitely.
Can I do that? How can I do that?

Basically, you can create such SVG graphics by using nested svg elements with relative positioning (%value of root svg element's size), like this.
svg{
overflow:visible;
}
svg.root{
width:200px;
height:100px;
margin:0 10px;
background-color:rgba(255,255,0,.5);
transition: 1s ease-in-out 0s;
}
svg.root:hover{
width:300px;
height:150px;
}
<svg class="root">
<svg class="tail" y="50%">
<circle r="10" fill="red"/>
</svg>
<svg class="head" x="100%" y="50%">
<polygon points="-10,-10 10,0 -10,10" fill="blue"/>
</svg>
<svg class="body" y="50%">
<rect x="0" y="-2" width="100%" height="4" fill="green"/>
</svg>
</svg>

Adding svg to page from svg sprite

I'm using grunt-svgstore in my grunt set up to create a svg sprite file from svg I add to my project.
The output is something like this.
<svg xmlns="http://www.w3.org/2000/svg"><symbol viewBox="0 0 32 32" id="shape-times"><title>times</title><desc>Created with Sketch.</desc> <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch --> <g id="times-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="times-times" sketch:type="MSArtboardGroup" fill="#B7C0C7"> <path d="M17.4142136,16 L23.7764339,9.63777963 C24.1745374,9.23967616 24.1686989,8.6123497 23.7781746,8.22182541 C23.3849276,7.82857845 22.753706,7.83208044 22.3622204,8.22356607 L16,14.5857864 L9.63777963,8.22356607 C9.23967616,7.8254626 8.6123497,7.83130112 8.22182541,8.22182541 C7.82857845,8.61507236 7.83208044,9.246294 8.22356607,9.63777963 L14.5857864,16 L8.22356607,22.3622204 C7.8254626,22.7603238 7.83130112,23.3876503 8.22182541,23.7781746 C8.61507236,24.1714215 9.246294,24.1679196 9.63777963,23.7764339 L16,17.4142136 L22.3622204,23.7764339 C22.7603238,24.1745374 23.3876503,24.1686989 23.7781746,23.7781746 C24.1714215,23.3849276 24.1679196,22.753706 23.7764339,22.3622204 L17.4142136,16 L17.4142136,16 Z" sketch:type="MSShapeGroup"/> </g> </g> </symbol></svg>
At the top of my document I'm adding a reference to the svg file.
<?php include_once("images/svg/processed/svg-defs.svg"); ?>
Whats the best way or how do I show the svg on the page. I'm trying things like this.
<object type="image/svg+xml" width="100" height="100" data="#times-Icons"></object>

To can reference a <symbol> element with a <use> element.
You should include the SVG with the symbols at the top of your document. Actually it could go anywhere, but I believe Safari has a bug which requires the definitions to be before the references to them.
You will need to hide the symbol definition SVG so it is not visible. To do that can either use display="none" or set width="0" height="0".
Then to reference the symbol, create another SVG of the desired size with a <use> element.
<svg width="40px" height="40px">
<use xlink:href="#shape-times"/>
</svg>
You can set the size explicitly as above, or use CSS as in the following example.
.large {
width: 40px;
height: 40px;
}
.small {
width: 24px;
height: 24px;
}
<svg xmlns="http://www.w3.org/2000/svg" display="none"><symbol viewBox="0 0 32 32" id="shape-times"><title>times</title><desc>Created with Sketch.</desc> <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch --> <g id="times-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="times-times" sketch:type="MSArtboardGroup" fill="#B7C0C7"> <path d="M17.4142136,16 L23.7764339,9.63777963 C24.1745374,9.23967616 24.1686989,8.6123497 23.7781746,8.22182541 C23.3849276,7.82857845 22.753706,7.83208044 22.3622204,8.22356607 L16,14.5857864 L9.63777963,8.22356607 C9.23967616,7.8254626 8.6123497,7.83130112 8.22182541,8.22182541 C7.82857845,8.61507236 7.83208044,9.246294 8.22356607,9.63777963 L14.5857864,16 L8.22356607,22.3622204 C7.8254626,22.7603238 7.83130112,23.3876503 8.22182541,23.7781746 C8.61507236,24.1714215 9.246294,24.1679196 9.63777963,23.7764339 L16,17.4142136 L22.3622204,23.7764339 C22.7603238,24.1745374 23.3876503,24.1686989 23.7781746,23.7781746 C24.1714215,23.3849276 24.1679196,22.753706 23.7764339,22.3622204 L17.4142136,16 L17.4142136,16 Z" sketch:type="MSShapeGroup"/> </g> </g> </symbol></svg>
<svg width="40px" height="40px">
<use xlink:href="#shape-times"/>
</svg>
<svg class="large">
<use xlink:href="#shape-times"/>
</svg>
<svg class="small">
<use xlink:href="#shape-times"/>
</svg>

SVG Animation on a ring outside of an icon

I am trying to animate the outer ring of an SVG. Since it's not filled circle, I can't change the element and spell it out with cx and cy and then change it via the animateTransform in the code.
What I' trying to do is make the outer ring "pulse" by going from 100% down to 80% then back up to 100%. I can make the entire SVG animate changing the scale="1 1" to scale=".8 .8" but that scales the whole SVG and from the upper left corner. Any thoughts on how to animate just the outer ring? I generate my SVG using Illustrator which doesn't make clean SVG. Any help is much appreciated.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<g>
<g>
<path fill="#00AEEF" d="M4.5,25.1c0-1.9,0.3-3.7,0.7-5.4c0.5-1.7,1.2-3.4,2.1-4.9s2-2.9,3.2-4.2s2.6-2.3,4.2-3.2
c1.5-0.9,3.2-1.6,4.9-2.1c1.8-0.5,3.6-0.8,5.4-0.8c1.9,0,3.7,0.2,5.4,0.7c1.8,0.6,3.4,1.3,4.9,2.2s2.9,2,4.2,3.2
c1.3,1.3,2.3,2.6,3.2,4.2c0.9,1.5,1.6,3.1,2.1,4.9c0.5,1.7,0.7,3.5,0.7,5.4s-0.2,3.7-0.7,5.4c-0.5,1.7-1.2,3.4-2.1,4.9
c-0.9,1.5-2,2.9-3.2,4.2c-1.3,1.2-2.7,2.2-4.2,3.1s-3.2,1.6-4.9,2.1c-1.7,0.5-3.5,0.7-5.4,0.7s-3.7-0.2-5.4-0.7
c-1.7-0.5-3.4-1.2-4.9-2.1c-1.5-0.9-2.9-2-4.2-3.2c-1.2-1.3-2.3-2.6-3.2-4.1s-1.6-3.1-2.1-4.9C4.8,28.7,4.5,26.9,4.5,25.1z
M6.4,25c0,1.7,0.2,3.3,0.7,4.9C7.5,31.5,8.2,33,9,34.3c0.8,1.4,1.8,2.6,2.9,3.8c1.1,1.1,2.4,2.1,3.8,2.9c1.4,0.8,2.9,1.4,4.4,1.9
c1.6,0.4,3.2,0.7,4.9,0.7c1.7,0,3.3-0.2,4.9-0.7c1.6-0.4,3.1-1.1,4.4-1.9c1.4-0.8,2.6-1.8,3.8-2.9c1.1-1.1,2.1-2.4,2.9-3.8
c0.8-1.4,1.4-2.9,1.9-4.4c0.5-1.6,0.7-3.2,0.7-4.9c0-1.7-0.2-3.3-0.7-4.9S41.8,17,41,15.7c-0.8-1.4-1.8-2.6-2.9-3.8
C37,10.8,35.7,9.8,34.3,9s-2.9-1.4-4.4-1.9c-1.6-0.5-3.2-0.7-4.9-0.7c-2.5,0-4.9,0.5-7.2,1.5s-4.2,2.3-5.9,4c-1.7,1.7-3,3.7-4,5.9
C6.9,20.1,6.4,22.5,6.4,25z"/>
</g>
<path id="pattern_3_" fill="#00AEEF" d="M15,35h10v-1.4H15V35z M16.4,15H15v10h1.4V15z M15,31.4h10V30H15V31.4z M15,27.9h10v-1.4
H15V27.9z M23.6,15h-1.4v10h1.4V15z M20,15h-1.4v10H20V15z M25,15v1.4h10V15H25z M25,20h10v-1.4H25V20z M25,23.6h10v-1.4H25V23.6z
M30,35h1.4V25H30V35z M33.6,35H35V25h-1.4V35z M26.4,35h1.4V25h-1.4V35z"/>
</g>
</svg>

The simplest solution would be to convert your outer circle back to a thick line. The equivalent circle would be:
<circle cx="25" cy="25" r="19.5" stroke-width="2" fill="none" stroke="#00AEEF"/>
Then you can just animate the radius.
<circle cx="25" cy="25" r="19.5" stroke-width="2" fill="none" stroke="#00AEEF">
<animate attributeName="r" values="19.5; 15.6; 19.5" dur="1s" repeatCount="indefinite"/>
</circle>
The final working demo is as follows:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<g>
<g>
<circle cx="25" cy="25" r="19.5" stroke-width="2" fill="none" stroke="#00AEEF">
<animate attributeName="r" values="19.5; 15.6; 19.5" dur="1s" repeatCount="indefinite"/>
</circle>
</g>
<path id="pattern_3_" fill="#00AEEF" d="M15,35h10v-1.4H15V35z M16.4,15H15v10h1.4V15z M15,31.4h10V30H15V31.4z M15,27.9h10v-1.4
H15V27.9z M23.6,15h-1.4v10h1.4V15z M20,15h-1.4v10H20V15z M25,15v1.4h10V15H25z M25,20h10v-1.4H25V20z M25,23.6h10v-1.4H25V23.6z
M30,35h1.4V25H30V35z M33.6,35H35V25h-1.4V35z M26.4,35h1.4V25h-1.4V35z"/>
</g>
</svg>

It's quite easy to do this with css transform animations. Insert '-webkit-', '-moz-' and '-ms-' prefixes if needed.
#keyframes pulse {
0% {
transform: scale(1);
}
100% {
transform: scale(0.8);
}
}
#ring {
animation-name: pulse;
animation-duration: 0.5s;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
transform-origin: center;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50">
<path id="ring" fill="#00AEEF" d="M4.5,25.1c0-1.9,0.3-3.7,0.7-5.4c0.5-1.7,1.2-3.4,2.1-4.9s2-2.9,3.2-4.2s2.6-2.3,4.2-3.2
c1.5-0.9,3.2-1.6,4.9-2.1c1.8-0.5,3.6-0.8,5.4-0.8c1.9,0,3.7,0.2,5.4,0.7c1.8,0.6,3.4,1.3,4.9,2.2s2.9,2,4.2,3.2
c1.3,1.3,2.3,2.6,3.2,4.2c0.9,1.5,1.6,3.1,2.1,4.9c0.5,1.7,0.7,3.5,0.7,5.4s-0.2,3.7-0.7,5.4c-0.5,1.7-1.2,3.4-2.1,4.9
c-0.9,1.5-2,2.9-3.2,4.2c-1.3,1.2-2.7,2.2-4.2,3.1s-3.2,1.6-4.9,2.1c-1.7,0.5-3.5,0.7-5.4,0.7s-3.7-0.2-5.4-0.7
c-1.7-0.5-3.4-1.2-4.9-2.1c-1.5-0.9-2.9-2-4.2-3.2c-1.2-1.3-2.3-2.6-3.2-4.1s-1.6-3.1-2.1-4.9C4.8,28.7,4.5,26.9,4.5,25.1z
M6.4,25c0,1.7,0.2,3.3,0.7,4.9C7.5,31.5,8.2,33,9,34.3c0.8,1.4,1.8,2.6,2.9,3.8c1.1,1.1,2.4,2.1,3.8,2.9c1.4,0.8,2.9,1.4,4.4,1.9
c1.6,0.4,3.2,0.7,4.9,0.7c1.7,0,3.3-0.2,4.9-0.7c1.6-0.4,3.1-1.1,4.4-1.9c1.4-0.8,2.6-1.8,3.8-2.9c1.1-1.1,2.1-2.4,2.9-3.8
c0.8-1.4,1.4-2.9,1.9-4.4c0.5-1.6,0.7-3.2,0.7-4.9c0-1.7-0.2-3.3-0.7-4.9S41.8,17,41,15.7c-0.8-1.4-1.8-2.6-2.9-3.8
C37,10.8,35.7,9.8,34.3,9s-2.9-1.4-4.4-1.9c-1.6-0.5-3.2-0.7-4.9-0.7c-2.5,0-4.9,0.5-7.2,1.5s-4.2,2.3-5.9,4c-1.7,1.7-3,3.7-4,5.9
C6.9,20.1,6.4,22.5,6.4,25z" />
<path id="pattern_3_" fill="#00AEEF" d="M15,35h10v-1.4H15V35z M16.4,15H15v10h1.4V15z M15,31.4h10V30H15V31.4z M15,27.9h10v-1.4
H15V27.9z M23.6,15h-1.4v10h1.4V15z M20,15h-1.4v10H20V15z M25,15v1.4h10V15H25z M25,20h10v-1.4H25V20z M25,23.6h10v-1.4H25V23.6z
M30,35h1.4V25H30V35z M33.6,35H35V25h-1.4V35z M26.4,35h1.4V25h-1.4V35z" />
</svg>
It's possible to make this work in Firefox too by adding a couple of extra elements to isolate the animation, to emulate what transform-origin does. See fiddle.

Resources