Posts

Showing posts with the label Svg

Change SVG Size In Angular Material 2 Using Vanilla CSS Or HTML

Answer : It seems that library styles override your css inline declaration. Try maybe to add !important declaration to your style: style="font-size: 16 !important" or since you didn't provide more code, try to inspect this icon node, to check which style define the font-size. Also check here UPDATE : Here is another possibly working solution. Add transform: scale(2); style for svg element you want to resize, where 2 is 200% of actual size (of course you can also downsize them using for example 0.5 value for 50%). Here is working sample for the website with your icons and link to documnetation: .size-24 button svg { width: 24px; height: 24px; transform: scale(2); } I played with this for way too long. I have a series of icons that I want to be scaled to fit in various mat-icon sizes, but each icon needs a different scale so they appear balanced with the other icons - effectively increasing the size of the viewBox. In the end this worked well...
Post a Comment
Read more

Can I Embed HTML Into An HTML5 SVG Fragment?

Answer : Yes, with the <foreignObject> element, see this question for some examples. Alternatively, if you have an html5 document you can also use CSS positioning and z-index to make parts of html visible where you want laid out on top of the svg. If you do it like that you don't need to nest the html inside the svg fragment. This will give you the most consistent behaviour across browsers in my experience. Foreign Objects are not supported on Internet explorer. Please check ForeignObject Copied from bl.ocks.org (thank you, Janu Verma) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML inside SVG</title> <style type="text/css"></style></head> <body> <div>I'm a div inside the HTML</div> <svg width="500" height="300" style="border:1px red solid" xmlns="http://www.w3.org/2000/svg"> ...
Post a Comment
Read more

Background Color Of Text In SVG

Answer : No this is not possible, SVG elements do not have background-... presentation attributes. To simulate this effect you could draw a rectangle behind the text attribute with fill="green" or something similar (filters). Using JavaScript you could do the following: var ctx = document.getElementById("the-svg"), textElm = ctx.getElementById("the-text"), SVGRect = textElm.getBBox(); var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); rect.setAttribute("x", SVGRect.x); rect.setAttribute("y", SVGRect.y); rect.setAttribute("width", SVGRect.width); rect.setAttribute("height", SVGRect.height); rect.setAttribute("fill", "yellow"); ctx.insertBefore(rect, textElm); You could use a filter to generate the background. <svg width="100%" height="100%"> <defs> <filter x="0" y=...
Post a Comment
Read more

Add Onclick Event To SVG Element

Answer : It appears that all of the JavaScript must be included inside of the SVG for it to run. I was unable to reference any external function, or libraries. This meant that your code was breaking at svgstyle = svgobj.getStyle(); This will do what you are attempting. <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='600' width='820'> <script type="text/ecmascript"><![CDATA[ function changerect(evt) { var svgobj=evt.target; svgobj.style.opacity= 0.3; svgobj.setAttribute ('x', 300); } ]]> </script> <rect onclick='changerect(evt)' style='fill:blue;opacity:1' x='10' y='30' width='100'height='100' /> </sv...
Post a Comment
Read more

Change SVG Fill Color In :before Or :after CSS

Answer : The accepted answer is incorrect, this is actually possible by applying a workaround with an SVG mask and background-color: p:after { width: 48px; height: 48px; display: inline-block; content: ''; -webkit-mask: url(https://gist.githubusercontent.com/mmathys/fbbfbc171233a30e478ad5b87ec4f5d8/raw/cd9219e336b8f3b85579015bdce9665def091bb8/heart.svg) no-repeat 50% 50%; mask: url(https://gist.githubusercontent.com/mmathys/fbbfbc171233a30e478ad5b87ec4f5d8/raw/cd9219e336b8f3b85579015bdce9665def091bb8/heart.svg) no-repeat 50% 50%; -webkit-mask-size: cover; mask-size: cover; } .red:after { background-color: red; } .green:after { background-color: green; } .blue:after { background-color: blue; } <p class="red">red heart</p> <p class="green">green heart</p> <p class="blue">blue heart</p> You're not actually modifying the SVG DOM itself, you're just changing the background ...
Post a Comment
Read more