SVG animated background stops about half way scrolled down - css
test.html:
<body style="background-image:url(test.svg);background-size:cover">
<div style="height:2000px"> Hello! </div>
</body>
test.svg (taken from https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate):
<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="100" height="100">
<animate attributeType="XML" attributeName="x" from="-100" to="120"
dur="10s" repeatCount="indefinite"/>
</rect>
</svg>
When I scroll about half way down the page, the animation pauses (actually, stops refreshing). Not sure why. Can't find anything on it in SVG specification, or google chrome documents...
My browser version Chromium 73.0.3683.86 Built on Ubuntu, running on LinuxMint 18.
it's a chromium thing i think, the browser thinks that the svg is outside ur screen so it pauses it to save resources, u can put a div inside the one with the background and give the second div a height: 100vh; and overflow: auto;
Related
clipPath on webkit does not render
Enthused by this article, I tried to apply a gradient clip-path to my relatively simple shape (an O letter converted to curves).
It works perfectly under Firefox, but as soon as I try it under a webkit, I see absolutely nothing.
I've tried to fix it, I've split it in simple parts, trying both Amit Sheen code with mine, and the only thing that make it fail is using my path instead of his. If I don't use clipPath, the path is rendered as expected, but as soon as I clip it, it just vanishes. I can't figure out what the problem is.
Can you help me?
.gradient {
width: 157px;
height: 157px;
background: linear-gradient(90deg, rgba(6,94,115,0.7959383582534576) 0%, rgba(207,241,255,1) 100%);
border-radius: 50%;
}
<svg viewBox="0 0 1000 400" xmlns="http://www.w3.org/2000/svg">
<clipPath id="clip">
<path d="M547.923,151.764C504.147,151.764 471.027,185.46 471.027,228.372C471.027,270.996 504.147,304.98 547.923,304.98C591.987,304.98 625.107,270.996 625.107,228.372C625.107,185.46 591.987,151.764 547.923,151.764ZM547.923,269.844C523.731,269.844 508.467,251.124 508.467,228.372C508.467,205.62 523.731,186.9 547.923,186.9C572.403,186.9 587.667,205.62 587.667,228.372C587.667,251.124 572.403,269.844 547.923,269.844Z" />
</clipPath>
<foreignObject x="470" y="150" width="157" height="157" clip-path="url(#clip)">
<div class="gradient" xmlns="http://www.w3.org/1999/xhtml"></div>
</foreignObject>
</svg>
You may need to transform your path so that it's left upper corner falls in the point (0,0). This is needed in chrome but won't work in firefox unless the foreign object has x="0" y="0". For this reason instead of giving a x and y attributes to the foreign object I translated it to the needed point.
svg{background:silver}
<svg viewBox="0 0 1000 400">
<foreignObject width="157" height="157" transform="translate(471,151)" clip-path="url(#clip)">
<div style="height:100%;background:gold"> </div>
</foreignObject>
<clipPath id="clip">
<path id="p" transform="translate(-471,-151)" d="M547.923,151.764C504.147,151.764 471.027,185.46 471.027,228.372C471.027,270.996 504.147,304.98 547.923,304.98C591.987,304.98 625.107,270.996 625.107,228.372C625.107,185.46 591.987,151.764 547.923,151.764ZM547.923,269.844C523.731,269.844 508.467,251.124 508.467,228.372C508.467,205.62 523.731,186.9 547.923,186.9C572.403,186.9 587.667,205.62 587.667,228.372C587.667,251.124 572.403,269.844 547.923,269.844Z" />
</clipPath>
</svg>
Cannot Change SVG <use> icon size when linked to <symbol>
I'm trying to use an SVG symbol in my mark-up, but I can't get the CSS to increase the size of the symbol being rendered inside a element?
I have a twitter logo defined in a set of tags, and then I'm referencing this with an xlink:href inside use tags. The icon is showing, but when I add CSS to the #box1 div holding the element the symbol isn't increasing or decreasing in size and seems to only rendering at the viewBox size.
Also, the SVG element itself when I hover it with the dev tools is rendering at 300 x 150px - but there is nothing on in the code with these measurements.
I'm really confused — any help would be awesome.
#box1 {
height: 10rem;
width: 10rem;
}
<defs style="display: none;">
<svg id="twitter" viewBox="0 0 19.19 15.95">
<symbol id="twitter-symbol"><title>twitter</title>
<path id="twitter-path" d="M19.19,1.92a8.76,8.76,0,0,1-2.28.64A3.9,3.9,0,0,0,18.63.32a6.87,6.87,0,0,1-2.52,1A3.87,3.87,0,0,0,13.23,0,4,4,0,0,0,9.32,4,3.41,3.41,0,0,0,9.44,5,11,11,0,0,1,1.32.72a4.29,4.29,0,0,0-.52,2A4,4,0,0,0,2.56,6.12,3.61,3.61,0,0,1,.76,5.6v0a4,4,0,0,0,3.16,4,4.35,4.35,0,0,1-1,.16,4.9,4.9,0,0,1-.76-.08,4,4,0,0,0,3.68,2.8A7.79,7.79,0,0,1,.92,14.19a6.78,6.78,0,0,1-.92,0A10.83,10.83,0,0,0,6,16c7.24,0,11.19-6.16,11.19-11.47V4a6.83,6.83,0,0,0,2-2" fill="#000">
</path>
</symbol>
</svg>
</defs>
<div id="box1">
<svg>
<use xlink:href="#twitter-symbol"/>
</svg>
</div>
The <defs>is an svg element. It always goes inside the svg. I've made a few changes and now it works. Please run the code and take a look at what I've done.
#box1 {
height: 10rem;
width: 10rem;
}
#twitter{display:none;}
<svg id="twitter">
<defs>
<symbol id="twitter-symbol"><title>twitter</title>
<path id="twitter-path" d="M19.19,1.92a8.76,8.76,0,0,1-2.28.64A3.9,3.9,0,0,0,18.63.32a6.87,6.87,0,0,1-2.52,1A3.87,3.87,0,0,0,13.23,0,4,4,0,0,0,9.32,4,3.41,3.41,0,0,0,9.44,5,11,11,0,0,1,1.32.72a4.29,4.29,0,0,0-.52,2A4,4,0,0,0,2.56,6.12,3.61,3.61,0,0,1,.76,5.6v0a4,4,0,0,0,3.16,4,4.35,4.35,0,0,1-1,.16,4.9,4.9,0,0,1-.76-.08,4,4,0,0,0,3.68,2.8A7.79,7.79,0,0,1,.92,14.19a6.78,6.78,0,0,1-.92,0A10.83,10.83,0,0,0,6,16c7.24,0,11.19-6.16,11.19-11.47V4a6.83,6.83,0,0,0,2-2" fill="#000">
</path>
</symbol>
</defs>
</svg>
<div id="box1">
<svg viewBox="0 0 19.19 15.95" width="24">
<use xlink:href="#twitter-symbol"/>
</svg>
</div>
I hope it helps.
You're using inline SVG code within your HTML, so I believe that SVG path needs a viewbox defined within it. For example, if you add viewBox="0 0 60 55" within your HTML SVG tag, you'll notice that the size will start to adjust. So edit this part of your HTML <svg viewBox="0 0 60 55"> <use xlink:href="#twitter-symbol"/> </svg> To expand on your note where you found the size listed as 300x150, this is the default standard size that applies to HTML inline SVG code (per HTML5 specs). This differs sometimes depending on the browser. Keep in mind, there a are a few different methods you can use when handling SVGs. Check out the guide below where they give a nice run down on SVG and how to manipulate it's size. You might find an alternative way that you would prefer to use. https://css-tricks.com/scale-svg/
Transforming an element inside an SVG in Microsoft Edge Doesn't Work
For some reason Microsoft Edge doesn't allow you to do transforms on elements inside of an SVG. Fills work fine (so I know the element targeting is working) but transforms are entirely ignored. This works fine in chrome and as far as I can tell, should work fine in Edge too.
HTML:
<div class="test-container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 400" xmlSpace="preserve">
<g id="Type">
<g>
<rect x="100" class="st1" id="rect1" width="100" height="100"/>
<rect x="100" y="100" class="st1" id="rect2" width="100" height="100"/>
</g>
</g>
</svg>
</div>
CSS:
.test-container {
width: 100px;
}
#rect1 {
fill: blue;
transform: translate(50px);
}
#rect2 {
fill: red;
}
See codepen example here: http://codepen.io/dwolfand/pen/pEzQgy
Any ideas?
As of August 31, 2016, Microsoft Edge does not support CSS transforms on SVG elements. This is however being considered by the Edge team for a future release. Given the support across other browsers, status.microsoftedge.com lists this work as likely.
This may be related to an issue I ran into with the D3.js library. Shapes would come out filled with black, because the attribute properties that Edge generated (and no other browser) would always come out UPPERCASE, which the SVG standard doesn't support. Inspect the elements and see if the attributes are uppercased; if so, then it's a known issue in Edge.
A CSS animation of a SVG Images 'fill' property not working in Safari
I'm trying to create a CSS animation for the fill color of a specific part of a SVG image. For that I'm using keyframes and an 'id' to link the animation and the SVG rectangle. You can see a working example here: http://jsbin.com/deyaqo/3/ This works for most of the browsers except Safari (and maybe IE, I don't know). I'm not sure if this is because of my implementation or due to the lack of support from this vendor. Thanks for your time !
You could use the animate element instead. <svg id="logo" x="0" y="0" width="150" viewBox="12.304 3.974 74.952 22.051" enable-background="new 12.304 3.974 74.952 22.051"> <rect id="laukia" x="56.74" y="23.094" width="17.895" height="2.932" fill="black" /> <animate xlink:href="#laukia" attributeType="XML" attributeName="fill" from="red" to="rosybrown" values="red; blue; green; teal; saddlebrown; peru; plum; rosybrown" repeatCount="indefinite" dur="5s" /> </svg>
SVG background on link - animating once on hover
I have an SVG set as a background image for a link. When you hover over the link the SVG is displayed and the animation is played once and then stops. This works great, except when you hover over the link a second time (or any other link with the SVG background), the animation doesn't start over.
Is there a way (other than setting the animation to loop) to get the SVG to start again on each hover? This is the code for the SVG:
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.2" baseProfile="tiny" id="All_glyphs" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="10px" height="20px" viewBox="0 0 10 20" xml:space="preserve">
<rect x="0" y="20" width="10" height="20" fill="#7fffe5">
<animate attributeName="y" from="20" to="0" dur="500ms" fill="freeze" repeatCount="0"/>
</rect>
</svg>
And the CSS I use:
a:hover {
background-image: url(link.svg);
}
In the end I used background-position and CSS transitions to animate the background.