I know if i add the hole SVG code in HTML i can access all the layers via CSS. But in this case i want to have my SVG as a separate file and then in HTML i'm linking to it. But is it possible to access the layers in CSS?
<div class="test"><img src="file.svg" /></div>
So i have tried this:
let poly_shapes = function myfunction() {
var x = document.getElementById("svg1");
var y = x.contentDocument.getElementById('clouds_1_');
return y;};
HTML i have:
<object id="svg1" data="pilis.svg" type="image/svg+xml"></object>
Before this if i had my svg code in html this JS would work
let poly_shapes = $('#clouds_1_')
Related
I have an SVG file:
myIcon.svg
<svg>.....</svg>
I want to use it in my css:
.body {
background-image: url(../myIcon.svg);
}
since an svg needs to be encoded for it to work as a background-image, that leaves me with something like this:
.body {
background-image: url("data:image/svg+xml,***<here place encoded svg>***");
}
Is there a way to store the encoded svg in it's own file for maintainability? Since it's not in html tags, I'm not sure how save it to it's own file or if it's even possible.
Put some hours in investigating which characters are not allowed in a data:image/svg URI
Many encoders convert < and >, but those are valid.
Load your external SVG file and replace all invalid characters
Create a new <style> element with the background-image
Wrapped in a modern Web Component so it totally does not matter when the script is executed
⚠️ xmlns="http://www.w3.org/2000/svg" must be present in the SVG file; it is not required when you inline SVGs in modern browsers.
<svg-import-background src="//svg-cdn.github.io/red.svg" selector="#container"></svg-import-background>
<svg-import-background src="//svg-cdn.github.io/yellow.svg" selector="div > h2"></svg-import-background>
<svg-import-background src="//svg-cdn.github.io/blue.svg" selector="pre"></svg-import-background>
<style>
body { font:16px Arial; color:beige } h2 { color: black }
</style>
<div id="container">
<h2>Web Component <svg-import-background></h2>
Inject external SVG file into CSS background-image
<pre>
<svg-import-background ATTRIBUTES:
src="PATH TO SVG FILE"
selector="Element selector"
</pre>
</div>
<script>
customElements.define("svg-import-background", class extends HTMLElement {
async connectedCallback() {
let svg = await (await fetch(this.getAttribute("src"))).text();
svg = svg.replace(/\>[\t\s\n ]+\</g, "><"); // replace all BETWEEN tags
svg = svg.replace(/#/g, "%23");
svg = svg.replace(/"/g, "'");
this.innerHTML = `<style>${this.getAttribute("selector") || "body"}{`+
`background-image:url("data:image/svg+xml;charset=UTF-8,${svg}")`+
`}</style>`;
}
})
</script>
<svg viewBox="0 0 8 8"><rect width="100%" height="100%" fill="gold"></rect></svg>
Re: encodeURIComponent
Yes, you can replace all 3 replace statements with:
svg = encodeURIComponent(svg);
The difference is what is injected in your HTML code.
The 3 replace statements injects:
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><rect width='100%' height='100%' fill='%23f00'></rect></svg>
encodeURIComponent injects:
%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%208%208%22%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%2300f%22%3E%3C%2Frect%3E%0A%3C%2Fsvg%3E
It is up to you which one you want to debug
I have several pages on a website that use the same header for each page. I was wondering if there was some way to simply reference a file with the html for the header sort of like in this pseudo code:
<!-- Main Page -->
<body>
<html_import_element src = "myheadertemplate.html">
<body>
Then in a separate file:
<!-- my header template html -->
<div>
<h1>This is my header</h1>
<div id = "navbar">
<div class = "Tab">Home</div>
<div class = "Tab">Contact</div>
</div>
</div>
This way I could write the header html once and just import it in each of my pages where I need it by writing one simple tag. Is this possible? Can I do this with XML?
You could do it in this fashion below.
<head>
<link rel="import" href="myheadertemplate.html">
</head>
where you could have your myheadertemplate.html
<div>
<h1>This is my header</h1>
<div id = "navbar">
<div class = "Tab">Home</div>
<div class = "Tab">Contact</div>
</div>
</div>
You can then use it with JS below
var content = document.querySelector('link[rel="import"]').import;
So, after a long time I actually found a way to do this using AJAX. HTML Imports are a great solution, but the support across browsers is severely lacking as of 04/2017, so I came up with a better solution. Here's my source code:
function HTMLImporter() {}
HTMLImporter.import = function (url) {
var error, http_request, load, script;
script =
document.currentScript || document.scripts[document.scripts.length - 1];
load = function (event) {
var attribute, index, index1, new_script, old_script, scripts, wrapper;
wrapper = document.createElement("div");
wrapper.innerHTML = this.responseText;
scripts = wrapper.getElementsByTagName("SCRIPT");
for (index = scripts.length - 1; index > -1; --index) {
old_script = scripts[index];
new_script = document.createElement("script");
new_script.innerHTML = old_script.innerHTML;
for (index1 = old_script.attributes.length - 1; index1 > -1; --index1) {
attribute = old_script.attributes[index1];
new_script.setAttribute(attribute.name, attribute.value);
}
old_script.parentNode.replaceChild(new_script, old_script);
}
while (wrapper.firstChild) {
script.parentNode.insertBefore(
wrapper.removeChild(wrapper.firstChild),
script
);
}
script.parentNode.removeChild(script);
this.removeEventListener("error", error);
this.removeEventListener("load", load);
};
error = function (event) {
this.removeEventListener("error", error);
this.removeEventListener("load", load);
alert("there was an error!");
};
http_request = new XMLHttpRequest();
http_request.addEventListener("error", error);
http_request.addEventListener("load", load);
http_request.open("GET", url);
http_request.send();
};
Now when I want to import HTML into another document, all I have to do is add a script tag like this:
<script>HTMLImporter.import("my-template.html");</script>
My function will actually replace the script tag used to call the import with the contents of my-template.html and it will execute any scripts found in the template. No special format is required for the template, just write the HTML you want to appear in your code.
As far as I know it's not possible. You can load the header as a webpage in a iframe element though. In the past webpages were built with frame elements to load seperate parts of a webpage, this is not recommended and support in current browsers is due to legacy.
In most cases this is done with server side languages like php with as example include("header.php");.
I have retrieved image URL from firebase database but when i am trying to display the image retrieved on web page the size of image is not getting adjusted according to specification which i have provided in tag in body.The image obtained is covering entire background of web page.
JS
var myParam=location.search.split('itemKey=')[1];
alert(myParam);
firebase.database().ref('/Sell_Products/'+myParam).once('value').then(function(snapshot)
{var name=snapshot.child('name').val();
alert(name);
var image=snapshot.child('image').val();
var category=snapshot.child('category').val();
var description=snapshot.child('description').val();
var price=snapshot.child('price').val();
document.querySelector('img').src = image;
});
HTML
<img height="125" width="125"/>
Let's try this: <img style="height: 125px; width: 125px;"/>
You can modify height and width in javascript.
In your html file, add id to your image tag like this <img id="my_image"/>
In your javascript file, add var image = document.getElementById('my_image');
image.height = '125';
image.width = '125';
I have a svg.html file where the svg content are defined within a element.
I've been combing the Internet for 3 days now, have not found a solution as to why the icons I use don't show up on the rendered .aspx web pages. svg.html looks like this:
<div class="svg-icons">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icons">
<symbol id="icon-menu" viewBox="0 0 18 18">
<path d="##path value##"></path>
</symbol>
</svg>
</div>
I have tried the following:
using the <object></object> tags referring to svg.html.
<use> tags.
In web.config <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
What am I doing wrong?
Please note that I cannot change the svg.html file, and this is an ASP.Net web forms project.
If you have complete markup inside html file containing SVG image, you can place a literal control & assign the HTML page contents from code behind by stripping unnecessary markups with regex:
ASPX
<asp:Literal ID="placeholder" runat="server" />
Code-behind
protected void Page_Load(object sender, EventArgs e)
{
string html;
using (StreamReader sr = File.OpenText(Server.MapPath("~/path_to_html_file.html"))
{
html = sr.ReadToEnd();
sr.Close();
}
Regex start = new Regex(#"[\s\S]*<body[^<]*>", RegexOptions.IgnoreCase);
html = start.Replace(html, "");
Regex end = new Regex(#"</body[\s\S]*", RegexOptions.IgnoreCase);
html = end.Replace(html, "");
placeholder.Text = html;
}
If you have raw SVG file and want to use it in literal tag element, you can simply use <iframe src="/path_to_SVG_file.svg" />/<embed src="/path_to_SVG_file.svg" /> inside user control, or a div assigned with InnerHtml attribute:
ASPX
<div id="placeholder" runat="server"></div>
Code-behind
placeholder.InnerHtml = File.ReadAllText(Server.MapPath("~/path_to_SVG_file.svg"));
References:
Include contents of an html page in an aspx page
Interactive Mapping Using SVG & ASP.NET
I have a code:
<div><img src=".../media/wysiwyg/ingresso-festa-retro-mix.jpg" >
It is not display image. However, when I use <> then it display normally:
<div><img src=".../media/wysiwyg/ingresso-festa-retro-mix.jpg">
is someone know it?
You can achieve this by using jquery without you wont. otherwise if its jade or pug means you can because they having compiler to compile it into HTML. but DOM may have some property for HTML to render.
even though < and > will render into < > but only after DOM.
Sample using jquery,
$('#demo').each(function(){
var $this = $(this);
var t = $this.text();
$this.html(t.replace('<','<').replace('>', '>'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="demo"><img src="http://i.stack.imgur.com/oURrw.png"></div>