Animated SVG elements distorting within HTML
0
I have a single webpage with an animated SVG that goes upward along a path. However when wrapping the markup within my HTML, it appears distorted and pushes towards the margin. I couldn't tell whether the positioning is incorrect or the whether the animation is wrong. Here's my code:
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="grid-container">
<!-- create SVG using location points -->
<svg width="50%" height="50%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<path fill="transparent" stroke="#000000" stroke-width="15" d="m -1.300355,36.773850 l -1.299004,36.777841 -1.298982,36.776811 -1.297459,36.776747 -1.296193,36.776726 -1.296097,36.779236 -1.296151,36.777637 -1.296215,36.776693 -1.294252,36.776586 -1.294048,36.776790 -1.293973,36.779118 -1.292622,36.779075 -1.291844,36.779049 -1.291879,36.778389 z" class="path" id="sendy"></path>
</svg>
<object class="sendy" type="image/svg+xml" data="https://images.sendyit.com/web_platform/vendor_type/top/2.svg">
</object>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>
and CSS
.sendy{
height: 50%;
width: 50%;
}
/*animations*/
.sendy {
animation: MoveUpDown 1s linear infinite;
position: absolute;
left: 0;
bottom: 0;
}
@keyframes MoveUpDown {
0%, 100% {
bottom: 0;
}
100% {
bottom: 100px;
}
}
Here's a link of what happens: https://jsfiddle.net/kimaiga/pjk7t1qb/
Any idea of what I'm missing?
html css svg css-animations svg-animate
asked Nov 26 '18 at 8:03
connoisseurconnoisseur
4219
add a comment |
0
I have a single webpage with an animated SVG that goes upward along a path. However when wrapping the markup within my HTML, it appears distorted and pushes towards the margin. I couldn't tell whether the positioning is incorrect or the whether the animation is wrong. Here's my code:
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="grid-container">
<!-- create SVG using location points -->
<svg width="50%" height="50%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<path fill="transparent" stroke="#000000" stroke-width="15" d="m -1.300355,36.773850 l -1.299004,36.777841 -1.298982,36.776811 -1.297459,36.776747 -1.296193,36.776726 -1.296097,36.779236 -1.296151,36.777637 -1.296215,36.776693 -1.294252,36.776586 -1.294048,36.776790 -1.293973,36.779118 -1.292622,36.779075 -1.291844,36.779049 -1.291879,36.778389 z" class="path" id="sendy"></path>
</svg>
<object class="sendy" type="image/svg+xml" data="https://images.sendyit.com/web_platform/vendor_type/top/2.svg">
</object>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>
and CSS
.sendy{
height: 50%;
width: 50%;
}
/*animations*/
.sendy {
animation: MoveUpDown 1s linear infinite;
position: absolute;
left: 0;
bottom: 0;
}
@keyframes MoveUpDown {
0%, 100% {
bottom: 0;
}
100% {
bottom: 100px;
}
}
Here's a link of what happens: https://jsfiddle.net/kimaiga/pjk7t1qb/
Any idea of what I'm missing?
html css svg css-animations svg-animate
asked Nov 26 '18 at 8:03
connoisseurconnoisseur
4219
add a comment |
0
0
0
I have a single webpage with an animated SVG that goes upward along a path. However when wrapping the markup within my HTML, it appears distorted and pushes towards the margin. I couldn't tell whether the positioning is incorrect or the whether the animation is wrong. Here's my code:
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="grid-container">
<!-- create SVG using location points -->
<svg width="50%" height="50%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<path fill="transparent" stroke="#000000" stroke-width="15" d="m -1.300355,36.773850 l -1.299004,36.777841 -1.298982,36.776811 -1.297459,36.776747 -1.296193,36.776726 -1.296097,36.779236 -1.296151,36.777637 -1.296215,36.776693 -1.294252,36.776586 -1.294048,36.776790 -1.293973,36.779118 -1.292622,36.779075 -1.291844,36.779049 -1.291879,36.778389 z" class="path" id="sendy"></path>
</svg>
<object class="sendy" type="image/svg+xml" data="https://images.sendyit.com/web_platform/vendor_type/top/2.svg">
</object>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>
and CSS
.sendy{
height: 50%;
width: 50%;
}
/*animations*/
.sendy {
animation: MoveUpDown 1s linear infinite;
position: absolute;
left: 0;
bottom: 0;
}
@keyframes MoveUpDown {
0%, 100% {
bottom: 0;
}
100% {
bottom: 100px;
}
}
Here's a link of what happens: https://jsfiddle.net/kimaiga/pjk7t1qb/
Any idea of what I'm missing?
html css svg css-animations svg-animate
asked Nov 26 '18 at 8:03
connoisseurconnoisseur
4219
I have a single webpage with an animated SVG that goes upward along a path. However when wrapping the markup within my HTML, it appears distorted and pushes towards the margin. I couldn't tell whether the positioning is incorrect or the whether the animation is wrong. Here's my code:
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="grid-container">
<!-- create SVG using location points -->
<svg width="50%" height="50%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<path fill="transparent" stroke="#000000" stroke-width="15" d="m -1.300355,36.773850 l -1.299004,36.777841 -1.298982,36.776811 -1.297459,36.776747 -1.296193,36.776726 -1.296097,36.779236 -1.296151,36.777637 -1.296215,36.776693 -1.294252,36.776586 -1.294048,36.776790 -1.293973,36.779118 -1.292622,36.779075 -1.291844,36.779049 -1.291879,36.778389 z" class="path" id="sendy"></path>
</svg>
<object class="sendy" type="image/svg+xml" data="https://images.sendyit.com/web_platform/vendor_type/top/2.svg">
</object>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>
and CSS
.sendy{
height: 50%;
width: 50%;
}
/*animations*/
.sendy {
animation: MoveUpDown 1s linear infinite;
position: absolute;
left: 0;
bottom: 0;
}
@keyframes MoveUpDown {
0%, 100% {
bottom: 0;
}
100% {
bottom: 100px;
}
}
Here's a link of what happens: https://jsfiddle.net/kimaiga/pjk7t1qb/
Any idea of what I'm missing?
html css svg css-animations svg-animate
html css svg css-animations svg-animate
asked Nov 26 '18 at 8:03
connoisseurconnoisseur
4219
asked Nov 26 '18 at 8:03
connoisseurconnoisseur
4219
asked Nov 26 '18 at 8:03
connoisseurconnoisseur
4219
asked Nov 26 '18 at 8:03
connoisseurconnoisseur
4219
asked Nov 26 '18 at 8:03
connoisseurconnoisseur
4219
4219
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
You need to change your animation to this:
@keyframes MoveUpDown {
to { transform: translateY(-100px); }
}
then change the size in the SVG tag
DEMO https://jsfiddle.net/12o8uqL4/
answered Nov 26 '18 at 17:28
Gildas.TamboGildas.Tambo
16.5k33763
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53476849%2fanimated-svg-elements-distorting-within-html%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
You need to change your animation to this:
@keyframes MoveUpDown {
to { transform: translateY(-100px); }
}
then change the size in the SVG tag
DEMO https://jsfiddle.net/12o8uqL4/
answered Nov 26 '18 at 17:28
Gildas.TamboGildas.Tambo
16.5k33763
add a comment |
1
You need to change your animation to this:
@keyframes MoveUpDown {
to { transform: translateY(-100px); }
}
then change the size in the SVG tag
DEMO https://jsfiddle.net/12o8uqL4/
answered Nov 26 '18 at 17:28
Gildas.TamboGildas.Tambo
16.5k33763
add a comment |
1
1
1
You need to change your animation to this:
@keyframes MoveUpDown {
to { transform: translateY(-100px); }
}
then change the size in the SVG tag
DEMO https://jsfiddle.net/12o8uqL4/
answered Nov 26 '18 at 17:28
Gildas.TamboGildas.Tambo
16.5k33763
You need to change your animation to this:
@keyframes MoveUpDown {
to { transform: translateY(-100px); }
}
then change the size in the SVG tag
DEMO https://jsfiddle.net/12o8uqL4/
answered Nov 26 '18 at 17:28
Gildas.TamboGildas.Tambo
16.5k33763
edited Nov 26 '18 at 17:37
answered Nov 26 '18 at 17:28
Gildas.TamboGildas.Tambo
16.5k33763
answered Nov 26 '18 at 17:28
Gildas.TamboGildas.Tambo
16.5k33763
answered Nov 26 '18 at 17:28
Gildas.TamboGildas.Tambo
16.5k33763
16.5k33763
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53476849%2fanimated-svg-elements-distorting-within-html%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
