How to draw shapes as a stroke for Circle in SVG ?
Something like this:
Try this
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="blue" stroke-width="5" stroke-dasharray="3" fill="transparent" />
Sorry, your browser does not support inline SVG.
</svg>
Adjust the stroke-width and stroke-dasharray
I have a circular, image mask set up in HTML to cover an image.
Here is that code for reference:
<div id="group-focus">
<svg height="800" viewbox="0 0 1000 800">
<defs>
<mask id="text-mask" maskUnits="userSpaceOnUse"
maskContentUnits="userSpaceOnUse">
<circle cx="600" cy="400" r="400" fill="white">
</mask>
</defs>
<!-- this is the image that I masked -->
<g mask="url(#text-mask)">
<image id="text-focus" width="2560" height="1440"
y="0" x="0" xlink:href="img/Asset13x.png" />
</g>
</svg>
</div>
Because I have the mask size set in HTML to the size I want, I am unsure of how to go about expanding the mask to a different size. Can you animate a mask in Javascript? This is for a motion graphic project I am working on currently.
Thanks!
I'm trying to create a box that is opaque, but has a block of text in it that you can see through (to like the background image of the page or some element underneath).
It's hard to explain so I've made some crude diagrams:
I am attempting to use SVG files to do this and use Javascript/jquery to modify the rectangle width and height but I'm not proficient at the SVG format... I've managed to piece this together using the evenodd filter:
https://jsfiddle.net/PhoenixFieryn/sqvLgqbq/
<svg id="coverimage" width="80pcm" height="30cm" viewBox="0 0 2000 2000" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Example fillrule-evenodd - demonstrates fill-rule:evenodd</desc>
<defs>
<rect x="1" y="1" width="2000" height="1000"
fill="white" stroke="blue" />
</defs>
<g fill-rule="evenodd" fill="white" >
<path d="M0 0 h1000 v1000 h-1000z M841,396.8c-2.4-4-1.6-8.8,2.4-11.2c68-44,95.2-105.6,95.2-172.8c0-116-96.8-205.6-211.2-205.6H610.6H469.8
h-6.4c-4,0-5.6,1.6-8.8,6.4L315.4,320c-4,6.4-8,6.4-11.2,0l-140-306.4c-2.4-4.8-4.8-6.4-8.8-6.4H9c-5.6,0-8.8,4-6.4,9.6l264,554.4
c1.6,4,5.6,6.4,9.6,6.4h66.4c4,0,7.2-1.6,8.8-5.6l110.4-230.8v228.4c0,4.8,3.2,8,8,8h146.4c4.8,0,8-3.2,8-8V426.4c0-4.8,3.2-8,8-8
h42.4c4,0,8,1.6,9.6,5.6l76,148c1.6,4,5.6,5.6,9.6,5.6h158.4c5.6,0,8.8-4,5.6-9.6L841,396.8z M701.8,276h-69.6c-4.8,0-8-3.2-8-8
V158.4c0-4.8,3.2-8,8-8h75.2c36.8,0,68,28.8,68,62.4C775.4,244,750.6,276,701.8,276z"/>
</g>
I don't know how to modify the size/position of the text and rectangle independently well. I can barely understand what I wrote and why the margin is so big.
If anyone could help me, through this or any other method, thank you!
Edit: someone pointed out that there may be a duplicate, but that solution does not work in Firefox unfortunately. I am looking for a cross “platform” solution. But thanks for the link, it’s very helpful nonetheless.
My suggestion is to create a mask using the text. We then create a blue rectangle that we mask with the our text mask.
We can postion the SVG and have it size the way we want using SVG width and height. But we also make the blue rectangle very large and have the SVG set to overflow: visible. This allows us to easily have the SVG size be responsive and also have the blue extend to all the way to the edges of the screen.
body {
background-image: url('http://austinhou.com/img/cover.jpg');
background-size: cover;
margin: 0;
padding: 0;
}
#coverimage {
width: 40%;
height: 100vh;
overflow: visible;
}
<body>
<svg id="coverimage" viewBox="0 0 950 600" preserveAspectRatio="xMinYMid meet">
<defs>
<mask id="vr">
<rect x="0" y="-1000%" width="1000%" height="3000%" fill="white"/>
<path fill="black" d="M841,396.8c-2.4-4-1.6-8.8,2.4-11.2c68-44,95.2-105.6,95.2-172.8c0-116-96.8-205.6-211.2-205.6H610.6H469.8
h-6.4c-4,0-5.6,1.6-8.8,6.4L315.4,320c-4,6.4-8,6.4-11.2,0l-140-306.4c-2.4-4.8-4.8-6.4-8.8-6.4H9c-5.6,0-8.8,4-6.4,9.6l264,554.4
c1.6,4,5.6,6.4,9.6,6.4h66.4c4,0,7.2-1.6,8.8-5.6l110.4-230.8v228.4c0,4.8,3.2,8,8,8h146.4c4.8,0,8-3.2,8-8V426.4c0-4.8,3.2-8,8-8
h42.4c4,0,8,1.6,9.6,5.6l76,148c1.6,4,5.6,5.6,9.6,5.6h158.4c5.6,0,8.8-4,5.6-9.6L841,396.8z M701.8,276h-69.6c-4.8,0-8-3.2-8-8
V158.4c0-4.8,3.2-8,8-8h75.2c36.8,0,68,28.8,68,62.4C775.4,244,750.6,276,701.8,276z" transform="translate(-210 0)"/>
</mask>
</defs>
<rect x="0" y="-1000%" width="1000%" height="3000%" fill="#09f" mask="url(#vr)"/>
</svg>
</body>
JSFiddle version
I was trying to manipulate SVG in plain JS and found that it won't behave as intended if I don't use methods like createElementNS and setAttributeNS.
<svg id="mydsvg" width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
The above markup works perfectly. But if you try to add another circle via the following code, you won't see it.
var circle = createElement('circle');
circle.setAttribute('cx', 50);
....
document.getElementById('mysvg').appendChild(circle);
But if you use createElementNS and setAttributeNS, it will work as expected.
To be worst, both createElement and createElementNS create identical DOM text.
It doesn't work because the specifications say that SVG elements must exist in the SVG namespace and createElement creates elements in the html namepace. How would a parser know otherwise whether you wanted to create an html <a> element which works with a src attribute or a SVG <a> element for which an `xlink:href attribute is required.
In html where namespaces are not serialized things look the same. In XML where namespaces are serialized they don't.
SVG in html looks like this...
<svg id="mydsvg" width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
SVG as a standalone document would look like this
<svg xmlns="https://www.w3.org/2000/svg" id="mydsvg" width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
The circle inherits the namespace of its parent.
Is there any way I can make the SVG 100% by 100% but disabling scaling?
I need the image to be in the middle of the page (both horizontal and vertical). The problem here is that I want to display the areas that are outside of the SVG artboard too, so centralizing with CSS wouldn't work for me. I know that displaying those areas is possible if you have an image with 100% width and a set height or vice-versa.
This was possible with Flash but I have not find a way to do it with SVG and HTML.
Normal SVG:
<svg style="width: 100px; height: 100px;">
<circle cx="50" cy="50" r="100" stroke="black" stroke-width="3" fill="red" />
</svg>
100% Width
<svg style="width: 100%; height: 100px;">
<circle cx="50" cy="50" r="100" stroke="black" stroke-width="3" fill="red" />
</svg>
Now, when you take the same code and make it 100% by 100%, it scales the image. Is there a way yo stop this?
100% by 100% Plus imaginary no-scale code
<svg style="width: 100%; height: 100%;" ##no_scale_code##>
<circle cx="50" cy="50" r="100" stroke="black" stroke-width="3" fill="red" />
</svg>
Here is a codepen example of the code I have so far:
http://codepen.io/cecilomar/pen/Gcpys
Your codepen example SVG includes a viewBox attribute. If you don't want the SVG to be scaled when you make the dimensions larger, then remove the viewBox.