Why are custom elements in SVG invisible?
Composing Svg with Aurelia is similar to composing html. You have to make sure though that any custom elements are implemented containerless (either by decorating the ViewModel with the `#containerless' attribute or adding an attribute 'containerless' to the custom element tag. SVG is picky about elements that are not defined in the specification and attributes that have the wrong value type.
Even if you have taken care of making them containerless it is still possible the custom elements do not show, even though they are added to the DOM.
Checkout this GistRun. You would expect two white rectangles, that are present in the DOM, above the other elements. But they are not visible.
The reason the elements do not show is because of the comments Aurelia uses to track element positions (<!--<view>-->). You can avoid this issue by wrapping your elements in a SVG tag:
<template>
<svg>
...
</svg>
</template>
See this Gistrun for a working result.
Edit: Be sure to add an attribute overflow="visible" if you dont want the inner elements to be clipped by the SVG element:
<template>
<svg overflow="visible">
...
</svg>
</template>
More info in the Aurelia cheat sheet :
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/cheat-sheet/9
Related
I have a reusable SVG component that contains some templated content. As part of the component default function, I'd like to include a shadow/reflection visual effect.
So, easy, right; use and done. Except, here's a reduced example to show the problem I'm having:
<svg>
<use xlink:href="#reflect"></use>
<g id="reflect">
<templated-content class="blue" />
</g>
</svg>
<svg>
<use xlink:href="#reflect"></use>
<g id="reflect">
<templated-content class="red" />
</g>
</svg>
Will each reflection be red, or blue? Because the element can be reused, and each instance is potentially different, I can't rely on a constant id attribute.
I'd prefer to avoid assigning id pairs to each instance via script. I couldn't find anything useful in the W3C xlink spec, but there's enough jargon there that I may have missed something.
Is there a supported way to include a relative use, or perhaps a similar result via another declarative feature?
EDIT: I know it is invalid to include multiple elements with the same id. That is why I want a way to create a reflection from a relative declarative reference. Can this be done?
Having two items with the same id in the same document is invalid.
A <use> element must point to an id and each id must be unique, there's no such thing as a relative <use>
Each reflection should be blue.
You'll need to generate unique ids.
i load a svg file like this
var draw=SVG('container');
var rawSVG=$('rawSVG').get('html'); //get content of invisible div with mootools
draw.svg(rawSVG);
in rawSVG DIV i can see the link tags. But in container, everything inside of the link tags is dropped and i get empty tags
in import.svg.js the only thing related to xlink:href i could found is related to image
element = context.image(attr['xlink:href'])
the links are created by svg.js and saved by export.svg.js correctly but on importing the next time the get dropped.
edit:
i want to load a svg graphic into an cms and than be able to modify the graphic.
it is working fine but on next import the text within the link tag get dropped.
edit 2
ok, now i loose the xlink element but the child elements are kept
what i want is to change a svg node in an external svg file
i include in a hidden div called rawSVG
in witch i see
...//more svg
<a xlink:href="test/" id="lktest">
<text y="86.83333396911621" x="100" font-family="Muli" id="txtest">
<tspan dy="1.8em" x="0" id="tstest">test</tspan>
</text>
</a>
...//more svg
than i grab the content of that div with mootools
var rawSVG=$('rawSVG').get('html');
and than i do
draw.svg(rawSVG);
to make it editable in svg.js
but in my container div i see
... //more svg
<text y="86.83333396911621" x="100" font-family="Muli" id="txtest">
<tspan dy="1.8em" x="0" id="tstest">test</tspan>
</text>
... //more svg
the ink was created and exported with svg.js and works. this behavior happens after reload
i have the xmlns:xlink="http://www.w3.org/1999/xlink" in my svg node
I tried html 5 and html 4 strict
i tried svg with doctype and without
I also tried images and they get dropped aswell
it's like the xml link namespace is not recognized
i tried to set the namespace of xlink like in the comment of the answer to this cuestion:
xmlserializer strips xlink from xlink:html svg image tag
but nothing changed
any suggestion what I'm doing wrong?
I'm working with an SVG file that requires the "preserveAspectRatio='true'" on the root element. The SVG is displayed using a standard tag. Currently I'm re-adding the attribute each time I update the SVG file in Illustrator. Is there an easier way to apply this attribute via CSS (or otherwise) so that I don't have to continually re-add the attribute?
<img src="image.svg#preserveAspectRatio=none" /> is the idealistically easy type of implementation I'm hoping for, but my fingers aren't crossed too tight.
The syntax according to the svg spec is:
<img src="image.svg#svgView(preserveAspectRatio(none))" />
Depending on parent html tag of an SVG object, I would like it's path color to change. Can this be done with SVG? For instance, if a logo is in the header I want it to be red, if it is in the footer I want it to be blue. Here's an example:
<style type="text/css">
#header-img {
fill:blue;
}
#footer-img {
fill:black;
}
</style>
...
<header>
<object id="header-img" type="image/svg+xml" data="myimg.svg" />
</header>
...
<footer>
<object id="footer-img" type="image/svg+xml" data="myimg.svg" />
</footer>
Granted, this can't be done, but is there an alternative without using JavaScript?
Starting again, this is the best question/answer to your problem that I can find:
How to apply a style to an embedded SVG?
It's possible for you to add a linked stylesheet to the file you wish to embed by hand...
Thereby avoiding the use of JavaScript.
I would argue that you should try not to ask redundant questions.
We'd have both done well to have sourced this earlier.
Yes you can.
SVG elements can be manipulated in much the same way as any other HTML/DOM element. For example, with Raphael JS (http://raphaeljs.com/) you could, at the very least, find the absolute position of a vector/SVG element in the browser window, compare that to the absolute position of your header/footer and, using JQuery, trigger an event to change the colour of the SVG.
Raphael additionally renders VML graphics for old versions of IE. So it's well worth looking into.
That said, if you're not planning to use JavaScript, then do it with CSS instead.
Updated with a working example, found here;
http://jsfiddle.net/Zp6HS/4/
Replacing the 'circle' element with your custom path, and the css properties you want to change.
Can't you use the 'parent of' operator in css? Like so:
<style>
header > svg {
fill:blue;
}
body > svg {
fill:black;
}
</style>
How could one obtain nine-slice scaling in SVG?
Specifically, I'm looking for a way to define SVG objects that behave like nine-sliced objects when resized (some elements maintain their dimension, and others scale with the container).
If you meant to apply it to an svg, then the CSS3 Borders and backgrounds spec should help you do that if you reference an svg.
If you meant you wanted to do it inside an svg file, then you might be able to use a <pattern> (possibly combined with some nested <svg> elements) to do something similar. Nested <svg> elements might be another way to do this, see e.g this example. Alternatively use 9 <use> elements with different transforms, each having a different clip-path applied.
You need something like a margin around the elements that form the edges and the center, to tell them to start X pixels from the left/top to y pixels from the right/bottom. Use a foreignObject, like this:
<foreignObject width="100%" height="100px">
<div xmlns="http://www.w3.org/1999/xhtml" style="margin: 0 100px;">
<svg>
<!-- code here -->
</svg>
</div>
</foreignObject>
I wrote about methods of applying scaling grids to SVG here: http://w3.eleqtriq.com/2014/03/the-holy-grail-of-image-scaling/
Cheers, Dirk