svg

问题 I'm trying to apply a mask-image on the background of an element, but I don't want to mask its children. I've tried to change the z-index without any success. * { box-sizing: border-box; } body { margin: 0; background: #000; } .el { width: 100%; height: 60px; mask-repeat: no-repeat; mask-position: center; background-color: #fff; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cpath d='M100 60c-13.43 0-20.2-11.37-26.74-22.37C67.25

问题 I'm trying to apply a mask-image on the background of an element, but I don't want to mask its children. I've tried to change the z-index without any success. * { box-sizing: border-box; } body { margin: 0; background: #000; } .el { width: 100%; height: 60px; mask-repeat: no-repeat; mask-position: center; background-color: #fff; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cpath d='M100 60c-13.43 0-20.2-11.37-26.74-22.37C67.25

问题 I am playing with CSS3 animation and dashoffset. This is the tutorial I have been following: https://jakearchibald.com/2013/animated-line-drawing-svg/ After some adaptation, this stroke dashoffset animation is still not working : @keyframes dash { to { stroke-dashoffset: 0; } } #currency-chart-path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; } <svg id="city-total-v2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999

问题 I have this radial gradient expressed in objectBoundingBox coordinates. <svg width="300" height="300"> <defs> <radialGradient id="MyGradient" gradientUnits="objectBoundingBox" cx="0.3" cy="0.4" r="0.3" fx="0.1" fy="0.2"> <stop offset="0%" stop-color="red" /> <stop offset="50%" stop-color="blue" /> <stop offset="100%" stop-color="black" /> </radialGradient> </defs> <rect fill="url(#MyGradient)" stroke="black" stroke-width="5" x="50" y="100" width="200" height="100"/> </svg> Is it possible to

问题 I've read a bit of the spec for the SVG mask element but the sections on maskUnits and maskContentUnits aren't clear to me, and also how they affect each other isn't clear to me. From the spec: maskUnits = 'userSpaceOnUse' : x, y, width and height represent values in the current user coordinate system in place at the time when the mask element is referenced. maskUnits = 'boundingBox' : x, y, width and height represent fractions or percentages of the object bounding box of the element to which

问题 I've read a bit of the spec for the SVG mask element but the sections on maskUnits and maskContentUnits aren't clear to me, and also how they affect each other isn't clear to me. From the spec: maskUnits = 'userSpaceOnUse' : x, y, width and height represent values in the current user coordinate system in place at the time when the mask element is referenced. maskUnits = 'boundingBox' : x, y, width and height represent fractions or percentages of the object bounding box of the element to which

问题 Is it possible to make such a thing with pure SVG? Without Javascript, fixed sizes or html. I tried to use a rect element but this is not a flexible solution. I tried to use a filter but this is a solution without rounded corners. 回答1: You can do this with a filter in two alternative ways: Do a flood, blur it, then clip the low opacities, then dial up the remaining opacity to full Smuggle in a rounded corner rect via feImage and use relative sizing to stretch it In both cases padding is

问题 Not an expert in HTML and checking the correct behavior of an HTML parser (looking for correct behavior according to html5 not good or expect (we can handle that later)). In the new HTML5 <svg> tag is it valid to place the "alt" attribute? <svg width="120" height="35" alt="Stuff"> {{ STUFF }} </svg> Or should the <svg> be imbedded inside an <img> to achieve this? <img alt="Stuff"> <svg width="120" height="35"> {{ STUFF }} </svg> </img> 回答1: SVG doesn't have an alt attribute, it uses a <desc>

问题 Not an expert in HTML and checking the correct behavior of an HTML parser (looking for correct behavior according to html5 not good or expect (we can handle that later)). In the new HTML5 <svg> tag is it valid to place the "alt" attribute? <svg width="120" height="35" alt="Stuff"> {{ STUFF }} </svg> Or should the <svg> be imbedded inside an <img> to achieve this? <img alt="Stuff"> <svg width="120" height="35"> {{ STUFF }} </svg> </img> 回答1: SVG doesn't have an alt attribute, it uses a <desc>

问题 I have a checkmark SVG animation that works in Safari, Chrome, Firefox, etc but does not work in Edge and IE (surprise surprise). It seems as if the SVG is there but the strokes are not displaying. As far as I can tell both Edge and IE11 support what I am trying to do and I've used every prefix I can think of. CSS/HTML: .checkmark { position: relative; left: 50px; z-index: 1; opacity: 1; width: 22px; border-radius: 50%; display: inline; stroke-width: 6; stroke: #fff; stroke-miterlimit: 10;