I am completely clueless, what is going wrong with my svg pattern. I defined it in the def section of the svg and then tried to reference it. But it doesn't show up once I include the svg in an img-tag. If I open it on itself in the browser everything is good though.
See the following examples:
http://kijani.co/img/sketch/index.html
http://kijani.co/img/sketch/livingroom.svg
And my code:
<defs>
<pattern id="paper" patternUnits="userSpaceOnUse" width="200" height="200">
<image xlink:href="http://kijani.co/img/pattern/paper.jpg" width="200" height="200"/>
</pattern>
</defs>
<g id="background">
<path id="paper" fill="url(#paper)" d="..."/>
</g>
This might be a really stupid question, but I am fairly new to svg and couldn't find a solution anywhere so far.
This is svg's referencing mode probrem.
Using img element to display svg image is restrected for refering outer resources.
So you should use object element to display svg image, or embed pattern image into svg by data scheme format.
Related
This question already has an answer here:
How many levels of recursion does SVG support?
(1 answer)
Closed 1 year ago.
i have created an SVG which has an image embedded.
I did this because i want the descriptions to be scalable.
The problem is, when i load the SVG only in chrome, the image is displayed.
When the svg is embedded in an img tag in the html though, i dont see the image.
When i write the svg code in the html file on the other hand the image is displayed.
I think the problem might be a pathing issue but im not sure as i dont get any errors displayed.
The SVG and IMG are in the same folder.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1189.851"
height="539.932">
<image overflow="visible" width="1190" height="540" href="/pics/mashup/e-55211-10-piww-000.png"
transform="translate(0 -.034) scale(.9999)"/>
<g stroke="#1D1D1B" stroke-width="4.693" stroke-miterlimit="10">
<path fill="#FFF" d="M998.689 395.155l-10.44 21.628-67.39-33.204 10.454-21.633z"/>
<path fill="#FFF" d="M911.808 448.549l-22.247-8.621 26.866-70.699 22.247 8.625zM889.081
449.676h23.832v36.11h-23.832z"/>
<path fill="#FFF" d="M920.424 447.646c-2.273 10.825-12.828 17.741-23.553 15.44-10.729-2.301-17.576-12.942-
15.299-23.79 2.283-10.839 12.828-17.75 23.563-15.45 10.715 2.305 17.572 12.952 15.289 23.8zM1012.159
414.767c-4.812 9.959-16.71 14.093-26.559 9.24-9.863-4.854-13.955-16.857-9.148-26.825 4.804-9.959 16.696-
14.089 26.555-9.239 9.858 4.857 13.951 16.861 9.152 26.824zM946.415 380.806c-3.928 10.345-15.413 15.514-
25.66 11.55-10.229-3.969-15.34-15.577-11.417-25.917 3.933-10.34 15.422-15.514 25.656-11.545 10.248 3.968
15.362 15.564 11.421 25.912z"/>
<path fill="none" stroke-linecap="round" d="M980.243 420.437c-6.976 7.153-6.77 18.754.453 25.931M1009.065
446.372c6.972-7.159 6.774-18.75-.444-25.94"/>
</g>
I tried both and they dont work when loaded from an img tag, but do work when opened in browser or inspecting the element:
href="/pics/mashup/e-55211-10-piww-000.png"
href="e-55211-10-piww-000.png"
Thats how i want it to work.
<li class="c-linkedarea" data-content="img2 img" data-display="flex">
<img src="/pics/mashup/e-55211-10-piww-000.svg" alt="Microwall VPN Funktionsgrafik">
</li>
Thanks in advance
The solution to your question has been perfectly addressed by Erik Dahlström in his post here
Here is what CSS tricks has to say about it:
If “inline” SVG just isn’t your jam (remember it does have some legit drawbacks like being hard to cache), you can link to an SVG file and retain the ability to affect its parts with CSS by using .
Basically, you need to put your svg source inside the html <object> element like below:
<object data="pathToYourSVG.svg" type="image/svg+xml">
<img src="backUpImgFileIfSVGDoesNotWork.jpg" />
</object>
I have an html file that uses inline svg. I use this so I can add classes to my svg and style them with CSS. The following snippet works:
<div>
<svg class="icon" viewbox="0 0 512 512">
<path d=" ... "/>
</svg>
</div>
Howeever, the tag can be quite long if the svg is complex. I'm currently using this svg in 3 different locations, and everytime I need to copy paste the entire path. It would be better if I could define the path only 1 time, preferabvly in a css class like this:
<div>
<svg class="icon" viewbox="0 0 512 512">
<path class="compleximage"/>
</svg>
</div>
.compleximage
{
d: ... ;
}
But this doesn't seem to work. Maybe I'm getting it wrong syntactically, or maybe it can't be done this way. If so, are there ways other to prevent having to copy/paste the svg in my html files? I'm trying to follow the "0,1 or infinite" design pattern, and copy/pasting code 3 times break that.
You can use the use tag to display the path in more than one place. Just give the path an id attribute and then refer to that in the xlink:href of the <use> element.
Something like
<defs>
<path id="image1" d="..." />
</defs>
<use x="20" y="10" xlink:href="#image1" />
<use x="50" y="50" xlink:href="#image1" />
etc.
In HTML5 you can do it.
Please try this:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
On the other hand, you can create your own SVG and get it via <img src="" />.
Sample below:
<img class="papa" src="http://s.cdpn.io/3/kiwi.svg">
Reference here:
(1) http://css-tricks.com/using-svg/
Another reference here how to change it via css:
(2) http://codepen.io/chriscoyier/pen/evcBu
You cannot set svg attributes using CSS. You can only set styles like stroke, fill, etc.
The only way would be to use javascript to set those paths dynamically. I would recommend jQuery.
this link should be helpful for using jQuery to modify svg files.
Modify a svg file using jQuery
I am writing a piece of infrastructure that needs to be applied differently to HTML elements versus SVG elements. Given a DOM node, how can I tell if it''s an SVG or HTML element?
You may try something like the following:
if(document.getElementById("el") instanceof SVGElement) {
console.log("It's an SVG element");
}
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="300">
<g id="firstGroup">
<rect id="el" width="100" height="50" x="40" y="20" fill="blue" />
<text x="40" y="100">This is a basic SVG document!</text>
</g>
</svg>
Note that the <svg> element itself is actually an HTML element containing SVG elements - which means that, perhaps surprisingly, the <svg> HTML element is not an SVG element, hence:
console.log(document.createElement("svg") instanceof SVGElement)) // => false
I'm not sure how cross browser compatible it is but I was poking through the DOM properties and saw a ownerSVGElement which seems promising?
Here goes what I was toying around with: http://jsbin.com/uMIronal/4/edit?html,js,output
I have multiple SVG pictures embedded into single HTML page.
Every SVG has own defs section that I am referencing to in my use elements.
It looks like I can't define element with the same id inside multiple defs and reference to it.
Second SVG use will pick the definition form the first SVG defs section, and ignore the local redefinition.
Does anybody know how I can reference to the LOCAL defs section?
The same story in Chrome and Firefox.
See the example below:
<html><head></head><body>
<svg height="50" width="50">
<defs>
<rect id="mybox" height="40" width="40" style="fill:#00F;"></rect>
</defs>
<use xlink:href="#mybox"/>
</svg>
<svg height="50" width="50">
<defs>
<rect id="mybox" height="20" width="20" style="fill:#F00;"></rect>
</defs>
<use xlink:href="#mybox"/>
</svg>
</body></html>
An SVG file with multiple identical IDs is invalid per http://www.w3.org/TR/SVG/struct.html#IDAttribute
Your options are either make all the IDs unique or move the SVG into separate files and reference them via <object> or <iframe> tags.
I created a tool to randomize definition id's to avoid this issue with inline svg's referencing the same #id, hopefully it will be useful for someone else. http://hugozap.com/randomize_svg_def_ids.html
One way to solve this is using svgo
svgo --enable=prefixIds *.svg
svgo can be installed via npm and is available as a library as well
We like using jQuery templates with SVG for example to show a Product with a nicely styled price.
Say we have an SVG that represents a complicated layout. Is it possible to have the <input> tags nested in the SVG and still work within HTML 5? Are there alternatives within SVG to input data from the user, maybe extracting them with Knockout.js?
I know you could use the SVG in the sense of a background graphic and hack the positions so that the form fields line up. I am really interested in having the input statements flowed by the SVG if possible.
You can use foreignObject. A small example :
<?xml version="1.0" standalone="yes"?>
<svg xmlns = "http://www.w3.org/2000/svg" width="100%" height="100%">
<rect x="25" y="25" width="250" height="200" fill="#ff0000" stroke="#000000"/>
<foreignObject x="50" y="50" width="200" height="150">
<body xmlns="http://www.w3.org/1999/xhtml">
<form>
<input type="text"/>
<input type="text"/>
</form>
</body>
</foreignObject>
<circle cx="60" cy="80" r="30" fill="#00ff00" fill-opacity="0.5"/>
</svg>
This is a standard SVG, but I added HTML elements between the rect and the circle using the foreignObject tag. The stack order is respected, the circle being in front of the inputs.
Other solutions exists in "pure" SVG, but they heavily rely on JavaScript. Here an example : http://www.carto.net/papers/svg/gui/textbox/