I am trying to load an SVG from a .svg file. When I copy the SVG code into the webpage itself, it works. However, it doesn't work when I load the SVG code from a .svg file.
This works:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<svg height="100" width="100">
<polygon points="0,40 60,40 60,100 40,100 40,60 0,60" style="fill:lime"/>
</svg>
</body>
</html>
This does not work:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<object data="pic.svg"></object>
</body>
</html>
pic.svg:
<svg height="100" width="100">
<polygon points="0,40 60,40 60,100 40,100 40,60 0,60" style="fill:lime"/>
</svg>
Even using
<img src="pic.svg"/>
does not work.
Why does this happen? Where am I going wrong?
Related
We have a single-page-application that is running on Node. I need to make sure that the web app is up and running. However, when I do curl or get request with urllib, I get the html content that is always displayed, even when there is an error with app compiling.
This is what is currently being returned by a get:
Request Data: b'<!DOCTYPE html>\n<html style="background-color: #fbfbfb; height: 100%">\n <head>\n <meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8" />\n <link rel="shortcut icon" href="./favicon.ico">\n <title>example</title>\n </head>\n <body style="min-height: 100%; margin:0">\n <div id="app"></div>\n <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">\n <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet"> \n <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">\n <!-- Dependencies -->\n <!-- <script src="../node_modules/react/umd/react.development.js"></script>\n <script src="../node_modules/react-dom/umd/react-dom.development.js"></script> -->\n \n\n <!-- Main -->\n <script src ="/bundle.js"></script>\n <script src="/vendors.bundle.js"></script>\n <script src="/main.bundle.js"></script>\n </body>\n</html>'
The section that is: <div id="app"></div>\n has more content.
This is the content if I look at Elements in Chrome Web Tools:
<div><div class="Section__container___3YYTG"><div><div><h2 class="MuiTypography-root MuiTypography-h2">Something went wrong</h2><h6 class="MuiTypography-root MuiTypography-h6">Loading chunk vendors~overview~siteColors~studyDetails failed.
(error: https://dev.example.com /vendors~overview~siteColors~studyDetails.bundle.js)</h6></div></div></div></div>
Is there a way to get urllib get request to return the expanded data content of
I am using Flex-ratio property, but this property is not working. I am sharing my code.
According to this link, this property is working fine on Polymer 1.0.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/paper-car/paper-card.html">
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-icon/iron-icon.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
<style is="custom-style" include="iron-flex"></style>
</head>
<body>
<div class="horizontal layout">
<div class="flex-2"><p>flex three</p></div>
<div class="flex-1"><p>flex</p></div>
<div class="flex-2"><p>flex two</p></div>
</div>
</body>
</html>
I made this mistake myself.... need to import iron-flex-factors in <style include="iron-flex iron-flex-factors iron-flex-alignment">
The exact same code works under Windows with Chrome, FF and IE.
I just switched to Linux and this code doesn't work neither on FF or Chrome?
I tried the "style" tag, with no change in results.
Can someone help?
Is there a browser independent way of having 100% svg coverage?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="jquery-1.11.2.min.js"></script>
<script src="snap.svg-min.js"></script>
<svg id="svgEle" height="100%" width="100%"></svg>
<script>
var snapCanvas = Snap("#svgEle");
var circle = snapCanvas.circle(100, 100, 100);
</script>
</body>
</html>
The browser is behaving correctly. If you try the HTML on Windows Chrome you get the same result.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<svg id="svgEle" height="100%" width="100%">
<circle cx="100" cy="100" r="100"/>
</svg>
</body>
</html>
The reason is as follows:
You haven't specified an actual size for the SVG. You've told it to be 100% of it's parent (<body>).
The <body> by default has width 100% and its height collapses to the height of its children.
The size of its child (the SVG) is not determinable, so the <body> height defaults to the "intrinsic size" used by browsers when it can't determine a size. That height is 150px.
So the end result is that the SVG has a size of 100% by 150px.
I'm following this tutorial: http://www.thymeleaf.org/doc/layouts.html (got to Thymeleaf Layout Dialect section).
In there you can find an example:
<!DOCTYPE html>
<html>
<head>
<!--/* Each token will be replaced by their respective titles in the resulting page. */-->
<title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE">Task List</title>
...
</head>
<body>
<!--/* Standard layout can be mixed with Layout Dialect */-->
<div th:replace="fragments/header :: header">
...
</div>
<div class="container">
<div layout:fragment="content">
...
</div>
<div th:replace="fragments/footer :: footer">© 2014 The Static Templates</div>
</div>
</body>
</html>
Footer and header are replaced by th:replace tag in above example, while <head> has <title> tag in layout file.
Basically, I want to replace whole <head> tag with th:replace.
Therefore, I have:
My layout file:
<!DOCTYPE html>
<html>
<head th:replace="/html/components/head :: head">
</head>
<body>
<div layout:fragment="content">
</div>
...
<div th:replace="/html/components/footer :: footer" />
</body>
<html>
My content file:
<!DOCTYPE html>
<html layout:decorator="/html/layouts/layout">
<head>
<title>My content title</title>
</head>
<body>
<div layout:fragment="content">
...
</div>
</body>
</html>
And finally my /html/components/head.htm file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head th:fragment="head">
<meta charset="utf-8" />
<title layout:title-pattern="$CONTENT_TITLE">Layout Title should be replaced by Content Title!</title>
...
</head>
<body>
</body>
</html>
Content is alright. Footer and head are included (replaced) from files as expected but page title is blank!
I get:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title></title>
...
What's wrong?
Finally, I've found a way to achieve what I wanted.
In layout file <title> tag must stay. All other tags I grouped with <object> tag and annotated it as follows:
<head>
<title layout:title-pattern="$CONTENT_TITLE">Layout Title will be replaced by Page Title!</title>
<object th:include="/html/components/head :: head" th:remove="tag" />
</head>
In my html/components/head.htm file I had to remove <title> tag so it won't be duplicated after include.
<head th:fragment="head">
<meta charset="utf-8" />
<!-- NO TITLE TAG HERE -->
...
</head>
This way head fragment is included in <object> tag and thanks to th:remove="tag" <object> tag gets removed and my final HTML output is:
<head>
<title>My content title</title>
<meta charset="utf-8" />
<!-- NO TITLE TAG HERE -->
...
</head>
Obviously, I removed NO TITLE TAG HERE message too, once I got it working.
I think I found a slightly less verbose way to for using th:replace and th:fragment together, e.g. to include common <head> metadata and static resource includes in your pages.
Put the th:remove="tag" in the fragment definition, so you don't have to repeat the th:remove="tag" everytime including it.
fragment_head.html
<thymeleaf xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
th:fragment="head" th:remove="tag">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" th:href="#{/css/vendor/bootstrap.min.css}"/>
</thymeleaf>
mypage.html
<head>
<thymeleaf th:replace="fragment_head :: head" />
</head>
You can replace whole head tag.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="pl" th:replace="fragments/head :: head">
</head>
<body>
...
</body>
</html>
resources/templates/fragments/head.html:
<head lang="pl">
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link href="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.5/css/bootstrap.min.css"
th:href="#{/webjars/bootstrap/3.3.5/css/bootstrap.min.css}"
rel="stylesheet" media="screen" />
<script src="http://cdn.jsdelivr.net/webjars/jquery/2.1.4/jquery.min.js"
th:src="#{/webjars/jquery/2.1.4/jquery.min.js}"></script>
<link href="../static/css/mycss.css"
th:href="#{css/mycss.css}" rel="stylesheet" media="screen"/>
</head>
i'm trying to make a simple header (HTML) with some text ( one word ). I would like the text to follow the center of the page, i mean that when i shrink the page width with the mouse i want the text change its position to the new center of the page.
Please help, thanks
Below is the sample code. The important thing is the CSS "text-align". Does this help?
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
</head>
<body>
<style type="text/css">
p.centerPara{text-align: center}
</style>
<p class="centerPara">Hello world!</p>
</body>
</html>
Try this sample code. It might be a little simpler. :)
<!DOCTYPE HTML>
<html>
<head>
<title>Title goes here</title>
<style type="text/css">
#banner{
width:100%
/*Additional banner code */
}
#banner h1{
text-align:center;
}
</style>
</head>
<body>
<div id="banner">
<h1>OneWord</h1>
</div>
</body>
</html>
Basically, the same thing. Text-align:center is the most important thing.