I have the following SVG elements containing markers to be displayed on a map in a web page. The markers are composed of the <image> elements referencing to various small PNG images:
<svg id="OL_105_svgRoot" width="1246" height="373" viewBox="0 0 1246 373">
<g id="OL_105_root" style="visibility: visible;" transform="">
<g id="OL_vroot">
<image id="P115" cx="843" cy="203" r="1" x="827" y="188" width="32" height="32" href="spider.png" ...>
<image id="P119" cx="453" cy="269" r="1" x="437" y="254" width="32" height="32" href="zoo.png" ...>
<image id="P123" cx="628" cy="82" r="1" x="612" y="67" width="32" height="32" href="wild.png" ...>
<image id="P131" cx="10495" cy="69" r="1" x="1034" y="53" width="32" height="32" href="export.png" ...>
...
</g>
</g>
</svg>
Is there any way I can replace those images with a single large image file and use something similar to CSS background-position property to specify the viewing window for each image?
Wrapping the <image> elements into inner <svg> elements, specifying a certain width and height on the <svg> element and the "background-position" on the <image> element using the x and y attributes might be a solution:
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<svg width="17" height="19">
<image xlink:href="http://s14.postimage.org/f66u116ap/rainbow_Hello_World4.png" width="188" height="19"/>
</svg>
<svg width="17" height="19" x="12" y="19">
<image xlink:href="http://s14.postimage.org/f66u116ap/rainbow_Hello_World4.png" width="188" height="19" x="-17"/>
</svg>
<svg width="17" height="19" x="35" y="6">
<image xlink:href="http://s14.postimage.org/f66u116ap/rainbow_Hello_World4.png" width="188" height="19" x="-34"/>
</svg>
<svg width="17" height="19" x="46" y="14">
<image xlink:href="http://s14.postimage.org/f66u116ap/rainbow_Hello_World4.png" width="188" height="19" x="-51"/>
</svg>
<svg width="17" height="19" x="60" y="24">
<image xlink:href="http://s14.postimage.org/f66u116ap/rainbow_Hello_World4.png" width="188" height="19" x="-68"/>
</svg>
</svg>
(See a test on Tinkerbin.)
You could also use the clip-path attribute, but I guess this is even more tedious than the above solution.
Related
I want to fill a rectangle space with a repeating image pattern. The images are arranged in a staggered square tiling. Two adjacent rows are staggered in the x-direction by half the width of the side of the square.
How to use the pattern element in svg to achieve this?
Here is the diagram of the result I want
I tried to achieve this shift but it did not work.
<svg width=1000 height=1000>
<pattern id="bar" width="200" height="200" patternUnits="userSpaceOnUse" patternTransform="rotate(0)">
<rect class="checker" x="0" width="100" height="100" y="0" fill="blue" />
<rect class="checker" x="100" width="100" height="100" y="0" fill="yellow" />
<rect class="checker" x="50" y="100" width="100" height="100" y="0" fill="red" stroke="red" />
<rect class="checker" x="150" y="100" width="100" height="100" y="0" fill="green" />
</pattern>
<rect width="100%" height="100%" fill=url(#bar)>
</svg>
The difficulty is that each of my squares is an image and it cannot be split in half. So I can't find the smallest element of this pattern.
Thank you in advance.
Something like this... You can replace the paths with images.
The trick is to draw one of the pieces in two separate halves allowing the pattern rect to clip each half.
<svg>
<pattern id="p" patternUnits="userSpaceOnUse" width="80" height="80">
<path transform="translate(8,8)" d="M17.37 17.07H6.57L4.24 24H3.01l8.23-24h1.52l8.23 24h-1.3zm-.39-1.13l-5-14.96-5.03 14.98h10.03Z"/>
<path transform="translate(48,8)" d="M17.37 17.07H6.57L4.24 24H3.01l8.23-24h1.52l8.23 24h-1.3zm-.39-1.13l-5-14.96-5.03 14.98h10.03Z"/>
<path transform="translate(28,48)" d="M17.37 17.07H6.57L4.24 24H3.01l8.23-24h1.52l8.23 24h-1.3zm-.39-1.13l-5-14.96-5.03 14.98h10.03Z"/>
<path transform="translate(68,48)" d="M17.37 17.07H6.57L4.24 24H3.01l8.23-24h1.52l8.23 24h-1.3zm-.39-1.13l-5-14.96-5.03 14.98h10.03Z"/>
<path transform="translate(-12,48)" d="M17.37 17.07H6.57L4.24 24H3.01l8.23-24h1.52l8.23 24h-1.3zm-.39-1.13l-5-14.96-5.03 14.98h10.03Z"/>
</pattern>
<rect width="200" height="200" fill="url(#p)"/>
</svg>
I have SVG file that i created it in photoshop. I would like to use it in my html page with clip-path property. I am trying to implement it as using clip-path:url(#mysvg); and paste the svg code to my html page. But i does not work. How can i do that?
My purpose is like this with css:
Here is the .svg file:
https://svgshare.com/i/dfw.svg
Here is the svg code
<!--IMAGE-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 814 506" >
<image id="image" class="image__svg-image" width="100%" height="100%" clip-path="url(#mask)" x="-100px" xlink:href="https://res.cloudinary.com/alvarosaburido/image/upload/v1589435086/blog/The%20Magic%20of%20SVG%20Clip-path/pic_yo5eyq.png" />
</svg>
<!--MY SVG FILE-->
<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1920" viewBox="0 0 1920 1920">
<metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c142 79.160924, 2017/07/13-01:06:39 ">
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<rdf:Description rdf:about=""/>
</rdf:RDF>
</x:xmpmeta>
<?xpacket end="w"?></metadata>
<defs>
<style>
.cls-1 {
fill: #fff;
fill-rule: evenodd;
}
</style>
</defs>
<path id="rect1" class="cls-1" d="M133,333.637L1426.05,171.265a157.557,157.557,0,0,1,175.99,136.647l157.93,1256.5L466.929,1726.79a157.574,157.574,0,0,1-176-136.65Z"/>
</svg>
In this example the viewBox of the <svg> is 100 in width and the image also takes up 100% of the width. So, no matter the actual width of the image it will always fill the entire SVG.
The <clipPath> fits in the size of the viewBox of the <svg> that holds the image. I know the width is 100, so I made the clippath 70 in height and width plus the extra height that the rotation takes up. This matches kind of the height of the images (unknown at this point).
I replaced the content of the <clipPath>. It is more "transparent" what the clip path does and easier to manipulate.
<!--IMAGE-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="300">
<image width="100%" href="https://res.cloudinary.com/alvarosaburido/image/upload/v1589435086/blog/The%20Magic%20of%20SVG%20Clip-path/pic_yo5eyq.png" clip-path="url(#mask)" />
</svg>
<!--MY SVG FILE-->
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<defs>
<clipPath id="mask" transform="translate(15 0) rotate(-10 60 0)">
<rect width="50" height="50" />
<rect x="20" y="20" width="50" height="50" />
<rect x="20" width="50" height="50" rx="10" />
<rect y="20" width="50" height="50" rx="10" />
</clipPath>
</defs>
</svg>
Update
OP asks if the original path can be used as a clip-path. It can, but the viewBox needs to be modified accordingly. So, if the viewbox 0 0 2300 1800 is used the path fits the image.
<!--IMAGE-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2300 1800" width="300">
<image width="100%" href="https://res.cloudinary.com/alvarosaburido/image/upload/v1589435086/blog/The%20Magic%20of%20SVG%20Clip-path/pic_yo5eyq.png" clip-path="url(#mask)" />
</svg>
<!--MY SVG FILE-->
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<defs>
<clipPath id="mask" transform="translate(350 0)">
<path id="rect1" class="cls-1" d="M133,333.637L1426.05,171.265a157.557,157.557,0,0,1,175.99,136.647l157.93,1256.5L466.929,1726.79a157.574,157.574,0,0,1-176-136.65Z"/>
</clipPath>
</defs>
</svg>
Update
To "path" or not to "path", that is the question. This third example is a better solution. The path is simpler and there are not that many child elements in <clipPath>.
<!--IMAGE-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11" width="300">
<image width="100%" href="https://res.cloudinary.com/alvarosaburido/image/upload/v1589435086/blog/The%20Magic%20of%20SVG%20Clip-path/pic_yo5eyq.png" clip-path="url(#mask)" />
</svg>
<!--MY SVG FILE-->
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<defs>
<clipPath id="mask" transform="translate(2 0) rotate(-10 7 0)">
<path d="M 0 0 L 6 0 A 1 1 90 0 1 7 1 L 7 7 L 1 7 A 1 1 90 0 1 0 6 Z"/>
</clipPath>
</defs>
</svg>
Update
This fourth example is using the original path, BUT defined in a <clipPath> and used as an external reference in CSS. The external SVG file have the following content:
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="mask" transform="translate(350 0)">
<path id="rect1" class="cls-1" d="M133,333.637L1426.05,171.265a157.557,157.557,0,0,1,175.99,136.647l157.93,1256.5L466.929,1726.79a157.574,157.574,0,0,1-176-136.65Z"/>
</clipPath>
</defs>
</svg>
But for this example I replace the URL (like https://svgshare.com/i/dfw.svg#rect) to the SVG file with a data URI.
svg>image {
clip-path: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzPgogICAgPGNsaXBQYXRoIGlkPSJtYXNrIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNTAgMCkiPgogICAgICA8cGF0aCBpZD0icmVjdDEiIGNsYXNzPSJjbHMtMSIgZD0iTTEzMywzMzMuNjM3TDE0MjYuMDUsMTcxLjI2NWExNTcuNTU3LDE1Ny41NTcsMCwwLDEsMTc1Ljk5LDEzNi42NDdsMTU3LjkzLDEyNTYuNUw0NjYuOTI5LDE3MjYuNzlhMTU3LjU3NCwxNTcuNTc0LDAsMCwxLTE3Ni0xMzYuNjVaIi8+CiAgICA8L2NsaXBQYXRoPgogIDwvZGVmcz4KPC9zdmc+#mask');
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2300 1800" width="300">
<image width="100%" href="https://res.cloudinary.com/alvarosaburido/image/upload/v1589435086/blog/The%20Magic%20of%20SVG%20Clip-path/pic_yo5eyq.png" />
</svg>
I'm trying to display a React component inside of an SVG. I used the foreignObject component to display my React object (ToolbarItem) inside of the SVG. However, nothing is displayed. What I did wrong?
Thanks for your help
<svg xmlns="http://www.w3.org/2000/svg" width="222.002" height="119.151" viewBox="0 0 222.002 119.151">
<g id="Margin" transform="translate(-51 -59)">
<path id="Soustraction_10" data-name="Soustraction 10" d="M10914,6398.1h0l-39-38.132v-41.828l39-38.139Z" transform="translate(-10641 -6220.475)" fill="#313c57">
<foreignObject x="40" y="40" width="100" height="100">
<ToolbarItem propKey="marginTop" type='draggableNumber' max={maxTop} />
</foreignObject>
</path>
</g>
</svg>
You can add a body tag
<foreignObject x="40" y="40" width="100" height="100">
<body>
<ToolbarItem propKey="marginTop" type='draggableNumber' max={maxTop} />
</body>
</foreignObject>
EDIT: the above works but generates a warning message.
Do the following instead :
<foreignObject x="40" y="40" width="100" height="100">
<div data-xmlns="http://www.w3.org/1999/xhtml">
<ToolbarItem propKey="marginTop" type='draggableNumber' max={maxTop} />
</div>
</foreignObject>
I have the following SVG code. The SVG with id "nestedsvg" is being appended in the HTML, I can view it on the console. But it's not visible on the screen. I tried assigning it a z-index of 99 but still it's invisible. Where am I going wrong?
<svg data="BusinessRoleFigure" x="144" y="95"
width="128" height="66" id="outer" style="position: relative;">
<rect x="0" y="0" width="100%" height="100%"
stroke="rgb(178,178,126)" stroke-width="1" fill="rgb(255,255,181)"
style="position: relative;"></rect>
<svg id="nestedsvg" x="100%" height="100" width="50">
<rect x="-50" rx="5" ry="5" width="20" height="10" stroke="black"
stroke-width="1" fill="black" z-index="99"></rect>
</svg>
<circle cx="118" cy="13" r="5" fill="none"
stroke-linejoin="round" stroke="black"
z-index="1" stroke-width="1"></circle>
</svg>
Jsfiddle: http://jsfiddle.net/MxHPq/145/
This is because the rectangle you are drawing is outside of the nested SVG viewport.
That SVG has a width and height of 100x50, and you are drawing a 20x10 rectangle at (-50,0). Meaning the rectangle covers the area from (-50,0) to (-30,10). So it is not visible. By default, objects outside a nested SVG viewport are not visible.
There are two ways to fix this:
Make objects outside the viewport visible. You can do this by setting overflow="visible" on the nested SVG.
<svg data="BusinessRoleFigure" x="144" y="95" width="128" height="66" id="outer">
<rect x="0" y="0" width="100%" height="100%" stroke="rgb(178,178,126)" stroke-width="1" fill="rgb(255,255,181)"></rect>
<svg id="nestedsvg" x="100%" height="100" width="50" overflow="visible">
<rect x="-50" rx="5" ry="5" width="20" height="10" stroke="black" stroke-width="1" fill="black"></rect>
</svg>
<circle cx="118" cy="13" r="5" fill="none" stroke-linejoin="round" stroke="black" stroke-width="1"></circle>
</svg>
Move the rectangle inside the SVG viewport and reposition the SVG so that the rectangle ends up in the same place.
I don't know why you wanted the nested SVG to be at x="100%", but you would need to change that if you go with this solution.
<svg data="BusinessRoleFigure" width="128" height="66" id="outer">
<rect x="0" y="0" width="100%" height="100%" stroke="rgb(178,178,126)" stroke-width="1" fill="rgb(255,255,181)"></rect>
<svg id="nestedsvg" x="78" height="100" width="50">
<rect x="0" rx="5" ry="5" width="20" height="10" stroke="black" stroke-width="1" fill="black"></rect>
</svg>
<circle cx="118" cy="13" r="5" fill="none" stroke-linejoin="round" stroke="black" stroke-width="1"></circle>
</svg>
A few other notes about your original SVG:
x and y coordinates on the root <svg> element have no effect.
z-index currently has no meaning in SVGs. Although this may change for the upcoming SVG2 standard.
position: relative has no meaning in SVGs.
I've removed these things from my modified examples.
I saw those html code on this website:
<a href="https://medium.com/" class="siteNav-logo" data-log-event="home">
<svg viewBox="0 0 45 45" width="45" height="45" class="svgIcon svgIcon--logoNew svgIcon-size--45px">
<use class="svgIcon-use svgIcon-use--part0" xlink:href="#svg-logoNew-45px-p0"></use>
<use class="svgIcon-use svgIcon-use--part1" xlink:href="#svg-logoNew-45px-p1"></use>
<use class="svgIcon-use svgIcon-use--part2" xlink:href="#svg-logoNew-45px-p2"></use>
<use class="svgIcon-use svgIcon-use--part3" xlink:href="#svg-logoNew-45px-p3"></use>
</svg>
<svg viewBox="0 0 95 45" width="95" height="45" class="svgIcon svgIcon--logoWordmarkNew svgIcon-size--95x45px">
<use class="svgIcon-use svgIcon-use--part0" xlink:href="#svg-logoWordmarkNew-95x45px-p0"></use>
</svg><span class="u-textScreenReader">Homepage</span>
</a>
Usually when you have a use tag inside svg, you need to use the defs tag to specify the specific shape that use is referred to. Just as follows:
<svg>
<defs>
<g id="shape">
<rect x="50" y="50" width="50" height="50" />
<circle cx="50" cy="50" r="50" />
</g>
</defs>
<use xlink:href="#shape" x="50" y="50" />
<use xlink:href="#shape" x="200" y="50" />
</svg>
But I couldn't find any defs tag on the page, so where does the browser find these external svgs(#svg-logoNew-45px-p0, #svg-logoNew-45px-p1, etc)?
They use the <symbol> tag instead of <defs>:
<div style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg">
<symbol viewBox="-17 18 45 45" id="svg-logoNew-45px-p0">...</symbol>
</svg>
</div>