I'm trying to draw multiple SVGs on a single page and the ids in the defs section of each SVG are clashing. I'd like each one to refer only the mask in their own defs. Currently they all use the mask that has a matching id on the first svg on the page. No svg knows about the others so they would have to rely on a random number generator to pick ids that (hopefully) are different.
Is that possible or do they need unique ids if the SVGs are loaded into the same webpage. They are created on the fly by d3.
<svg>
<defs>
<mask id="temperatureMask">
<rect width="100%" height="100%" fill="#ffffff">
</mask>
</defs>
<rect mask="#temperaureMask">…etc
</svg>
<svg>
<defs>
<mask id="temperatureMask">
<rect width="100%" height="50%" fill="#dddddd">
</mask>
</defs>
<rect mask="#temperaureMask">…etc
</svg>
The ids on a page must be unique. That includes any inline SVGs. You will need to alter your d3 script like you suggest to add a unique number etc to the ids.
Related
Currently working on a project that uses a slider to compare two different images overlaid with SVG's. SVG's on the right side of the slider have a mask applied to them while the SVG's on the left should remain unchanged.
My problem is that when using a mask to apply these styles the mask clips any of the element that it doesn't cover.
Reproduction CodePen: https://codepen.io/anon/pen/VNEOPy
Super minimal repro:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" height="200px">
<defs>
<pattern
id="pattern"
width="10"
height="10"
patternUnits="userSpaceOnUse"
>
<circle cx="5" cy="5" r="5" fill="#999"></circle>
</pattern>
<mask id="masker">
<rect x="0" y="0" width="25%" fill="url(#pattern)"></rect>
</mask>
</defs>
<circle cx="50" cy="50" r="50" mask="url(#masker)"></circle>
</svg>
What I would like to do is apply the mask to the portion of the element that the mask covers and allow the rest of the element to remain visible/unchanged.
This CodePen demonstrates the behavior I am looking for, but requires duplicating each of the SVG's (which is unfortunately not technically feasible in my case): https://codepen.io/anon/pen/vMzwbP
Is there a way to achieve this behavior with masking? Am I looking in the wrong place?
No. You are always going to have to have two instances of the circle. One with the mask applied, and one with no mask (or the inverse mask).
I have multiple svgs that I'd like to use in my application and was hoping to put them in a single custom-svg element to reference individually by id, however, the viewBoxes are different. One svg is defined as
<iron-iconset-svg name="club-icon" size="512">
<svg>
<defs>
<g id="club-icon">
<path d="bunch of numbers"></path>
</g>
</defs>
</svg>
</iron-iconset-svg>
The other svg is defined as
<iron-iconset-svg name="club-icon" size="300">
<svg>
<defs>
<g id="book-icon">
<path d="bunch of numbers"></path>
</g>
</defs>
</svg>
</iron-iconset-svg>
Is there a way for each custom icon to define its own viewBox, or must every svg defined within a single iconset share the same properties. For now I have multiple custom element html files, but each custom element is an http request (which I'm trying to minimize).
It can be done using symbols.
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="beaker" viewBox="214.7 0 182.6 792">
<!-- <path>s and whatever other shapes in here -->
</symbol>
<symbol id="shape-icon-2" viewBox="0 26 100 48">
<!-- <path>s and whatever other shapes in here -->
</symbol>
</svg>
See this article on CSS tricks for a further explanation.
https://css-tricks.com/svg-symbol-good-choice-icons/
you might try a transform scale on you g element?
<g id="book-icon" transform="scale(1.71)">
1.71 = 512/300
or if you are using gulp/grunt, you could resize the SVGs to be the same using svg-scaler or the like
Suppose I have an SVG which has the following defs:
<svg width="179" height="170" viewBox="0 0 179 170" xmlns="http://www.w3.org/2000/svg">
<title>Star 1</title>
<defs>
<g id="shape">
<rect x="50" y="50" width="50" height="50" />
</g>
</defs>
<g fill="none" fill-rule="evenodd">
<path stroke="#979797" fill="#D8D8D8" d="M89.5 140.25l-54.958 28.893 10.496-61.196L.576 64.607l61.445-8.93L89.5 0l27.48 55.678 61.444 8.93-44.462 43.34 10.496 61.195z" />
</g>
</svg>
I am including that SVG inside an HTML document using the object tag. For example:
<object type="image/svg+xml" data="star.svg" class="svgObjectWrapper">
Your browser doesn't support SVG
</object>
Is there any way, in the HTML document, to reference/use those defs from the SVG (which is in turn inside the object). For example, this doesn't seem to work. Should this be possible?
<use xlink:href="#shape" x="50" y="50" />
My guess is no, but I wanted to be sure.
It's possible on UAs that support it (Firefox does for instance) and you don't even need an object tag if all you want is to reference a document via <use>.
Per the SVG specification you can just put in the URL of the file you want to use the data from i.e.
<use xlink:href="star.svg#shape" x="50" y="50" />
star.svg has to be on the same domain as your html file.
Since <object> loads the svg in a separate document you can't use local references (such as <use xlink:href="#shape"/>) in the top document to reach resources inside the other document. It is possible to reference external resources with <use> though, e.g <use xlink:href="star.svg#shape"/>. Note that this still does not mean that it's the same document as that in the <object>, e.g if you change elements inside the <object> element it will have no effect on <use xlink:href="star.svg#shape"/>.
Suppose you have multiple SVG tags where in each you define a different clip path with the same ID.
<svg id="svg1" width="200" height="200">
<defs>
<clipPath id="nodeclipper">
<rect width="100" height="100" x="0" y="0" />
</clipPath>
</defs>
</svg>
<svg id="svg2" width="200" height="200">
<defs>
<clipPath id="nodeclipper">
<circle cx="20" cy="0" r="40" />
</clipPath>
</defs>
</svg>
I also made a JSFiddle. What is the expected behaviour? I thought that an element could only reference definitions inside its own SVG tag, but that doesn't seem to be the case:
Chrome 26: Uses circle clip path two times.
Firefox 17: Uses rect clip path two times.
Safari 6: Renders one rect and one circle clip path as expected.
It gets weird when you hide one of the SVG tags because Chrome and Safari then drop the clip-path entirely.
I know it works when the clipPaths have different IDs but is it supposed to be that way? As far as I see the spec doesn't contain information about the issue.
What you are doing is invalid per http://www.w3.org/TR/SVG/struct.html#IDAttribute this references http://www.w3.org/TR/2008/REC-xml-20081126/ which addresses this specific issue directly...
Values of type ID MUST match the Name production. A name MUST NOT appear more than once in an XML document as a value of this type; i.e., ID values MUST uniquely identify the elements which bear them.
I'm having a play with SVG and am having a few problems with positioning. I have a series of shapes which are contained in the g group tag. I was hoping to use it like a container, so I could set its x position and then all the elements in that group would also move. But that doesn't seem to be possible.
How do most people go about positioning a group of elements which you wish to move in tandem?
Is there any concept of relative positioning? e.g. relative to its parent
Everything in the g element is positioned relative to the current transform matrix.
To move the content, just put the transformation in the g element:
<g transform="translate(20,2.5) rotate(10)">
<rect x="0" y="0" width="60" height="10"/>
</g>
Links: Example from the SVG 1.1 spec
There is a shorter alternative to the previous answer. SVG Elements can also be grouped by nesting svg elements:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<svg x="10">
<rect x="10" y="10" height="100" width="100" style="stroke:#ff0000;fill: #0000ff"/>
</svg>
<svg x="200">
<rect x="10" y="10" height="100" width="100" style="stroke:#009900;fill: #00cc00"/>
</svg>
</svg>
The two rectangles are identical (apart from the colors), but the parent svg elements have different x values.
See http://tutorials.jenkov.com/svg/svg-element.html.
As mentioned in the other comment, the transform attribute on the g element is what you want. Use transform="translate(x,y)" to move the g around and things within the g will move in relation to the g.
There are two ways to group multiple SVG shapes and position the group:
The first to use <g> with transform attribute as Aaron wrote. But you can't just use a x attribute on the <g> element.
The other way is to use nested <svg> element.
<svg id="parent">
<svg id="group1" x="10">
<!-- some shapes -->
</svg>
</svg>
In this way, the #group1 svg is nested in #parent, and the x=10 is relative to the parent svg. However, you can't use transform attribute on <svg> element, which is quite the contrary of <g> element.
I know this is old but neither an <svg> group tag nor a <g> fixed the issue I was facing. I needed to adjust the y position of a <g> tag which also had animation on it.
The solution was to use both the <svg> and <g> tag together:
<svg y="1190" x="235">
<g class="light-1">
<path />
</g>
</svg>