I've got a problem with svg stroke-linecap attribute. I've got circular progress bar in AngularJS and I would like to set the outer circle (blue one) to have a rounded "ends". Look at this fiddle.
<svg ... height="130" width="130">
<!-- ngIf: background -->
<circle ...
ng-if="background"
fill="#fff"
class="ng-scope"
stroke-width="13"
stroke="#cc3399"
r="57.5"
cy="65"
cx="65"
stroke-linecap="round"
/>
<!-- end ngIf: background -->
<circle ...
fill="none"
stroke-dashoffset="36.12831551628261"
stroke-dasharray="361.28315516282623"
stroke-width="13"
stroke="#432db3"
stroke-linecap="round"
r="57.5"
cy="65"
cx="65"
transform="rotate(-89.9, 65, 65)"
/>
</svg>
How can i do that?
This has been fixed from Firefox 45 onwards.
Related
I have a requirement where I need to add an alt tag for <image> which is placed inside SVG
<svg class="svg-graphic" viewBox="148 174 757.33 757.33" xmlns="http://www.w3.org/2000/svg">
<g>
<clipPath id="frame-mask">
<path class="st0" d="M905.33,324.23c0-4.36-3.42-7.48-7.89-7.89c-72.15-3.95-130.16-61.96-134.11-134.11">
</path>
</clipPath>
</g>
<image class="img-clipPath" clip-path="url(#frame-mask)" x="148" y="174" xlink:href="./img/sample6.jpg">
<title>My image</title>
</image>
</svg>
I tried adding title tag but it shows up on hover of the image. But requirement is to add an alt text similar to the one we add in <img src="sample.jpg" alt="img description">
Imaging I create a bar chart using d3-v4.js.
Here below is the brief SVG code snippet:
<svg width="400" height="300">
<g class="brush">
<rect class="overlay" ... ></rect>
<rect class="selection" ... ></rect>
<rect class="handle handle--n" ... ></rect>
<!-- ... ... other rect handle ... ... -->
</g>
<g class="bar">
<rect width="200" height="20" x="0" y="0"></rect>
<!-- ... ... other rect bars ... ... -->
</g>
</svg>
Considering I can interact with every rect bars (eg. "click", "mouseenter" and "mouseleave"), I make g.bar above of g.brush so that rect.overlay will not overlay above all bars.
The brush works OK only when it start from the blank area(over the rect.overlay). But when I brush start from the bars it is not work. Obviously, the rect.overlay can not capture brush events anymore.
Any solution in this situation? Thanks in advance!
For some reason my spinner.svg is not animating when using xlink:href. Embedding the SVG on the page and using xlink:href seems to work fine, as the snippet below shows.
The problem: static (and solid!) spinner instead of animation
Why are the animation tags of the SVG suddenly not taking effect? The reference must be working since the image is actually displaying.
EDIT: Could this have to do with the shadow dom and xref?
According to Sara Soueidan "The target element must be part of the current SVG document fragment". I might be overloading what "document fragment" means, but to me document fragments belong in Shadow DOM land, and I suspect that SMIL animations might not work when using <use> statements due to this?
Working versions
.xlinked {
color: green;
}
img {
color: red; // not taking effect - of course! just a test.
}
.embedded {
color: blue;
}
<h1>xlink local</h1>
<svg class="xlinked">
<!-- could not get this external reference to work?
<use xlink:href="http://imgh.us/spinner_1.svg" />
-->
<use xlink:href="#spinner" />
</svg>
<h1>embedded</h1>
<div class="embedded">
<svg id="embedded" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<circle cx="50" cy="50" r="45" stroke="rgba(43,43,43,0.3)" fill="none" stroke-width="10" stroke-linecap="round"/>
<circle cx="50" cy="50" r="45" stroke="currentColor" fill="none" stroke-width="6" stroke-linecap="round">
<animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"/>
<animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"/>
</circle>
</svg>
</div>
<h1>img</h1>
<img src="http://imgh.us/spinner_1.svg" />
<h1>External absolute xlink (not working)</h1>
<svg>
<!-- could not get this external reference to work. should be the same as a local reference? -->
<use xlink:href="http://imgh.us/spinner_1.svg" />
</svg>
<h1>Source SVG with symbols for xlink reference </h1>
<svg xmlns="http://www.w3.org/2000/svg"><symbol id="spinner" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><circle cx="50" cy="50" r="45" stroke="rgba(43,43,43,0.3)" fill="none" stroke-width="10" stroke-linecap="round"/><circle cx="50" cy="50" r="45" stroke="currentColor" fill="none" stroke-width="6" stroke-linecap="round"><animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"/><animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"/></circle></symbol></svg>
In SVG1.1, Use element requires reference to SVG fragment not SVG URL. Try to add id attribute to root svg element of external SVG file and add hash string to href value of use element, like this.
external svg(spinner_1.svg)
<svg xmlns="http://www.w3.org/2000/svg" id="root">
<!--svg structure-->
</svg>
html uses external SVG file
<svg>
<use xlink:href="http://imgh.us/spinner_1.svg#root" />
</svg>
Note:In SVG2, you can set SVG URL to href attribute of use element. See https://www.w3.org/TR/2016/CR-SVG2-20160915/struct.html#UseElement
I use saveSvgAsPng to get svg`s dataUri. Then I converted the dataUri to .svg by Java.The original picture had foreginObject tag.When I save it to .svg,and open it with chrome,the foreignObject tag do not show.This is my .svg tag
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1477" height="1033" class=".save" style="-webkit-tap-highlight-color:rgba(0,0,0,0)" id="saveImg" viewBox="-201.48349917081265 -185.1995003306789 1477 1033" preserveASpecRatio="none" version="1.1">
<g>
<g class="textGroup">
<text>This is test</text>
</g>
<g>
<foreignObject x="200" y="50" width="200" height="200">
<div>
<p style="color:rgb(0,0,0)">this is P</p>
</div>
</foreignObject>
</g>
</g>
</svg>
As you know,Directly with chrome open. svg do not have <html>and <body>
With firefox, when I middle-click (or ctrl+click) on a use element, it open the xlink:href url in new tab (like a href)
bug or feature?
<svg viewBox="0 0 400 80">
<circle id="circle" cx="40" cy="40" r="30" fill="#29e"></circle>
<use xlink:href="#circle" transform="translate(70, 0)" style="stroke: red;"></use>
</svg>
<p>ctrl+click on right circle</p>
It's an unresolved bug that they're not really sure how to handle. Trigger is the xlink:href that gets somehow internally treated just like an A.href does (middle-click or ctrl + click open to a new tab.) One workaround is to bury the xlink:href element under an invisible rect:
<svg viewBox="0 0 400 80">
<circle id="circle" cx="40" cy="40" r="30" fill="#29e" />
<use xlink:href="#circle" transform="translate(70, 0)" style="stroke: red;" />
<rect style="opacity:0" x="80" y="10" width="60" height="60" />
</svg>
<p>ctrl+click on right circle - nothing happens</p>
If you have any events that need to trigger, you'll have to tie them to the invisible rect.
As a workaround for the bug linked in previous answer you may also use pointer-events: none CSS rule on the use element:
<svg viewBox="0 0 400 80">
<circle id="circle" cx="40" cy="40" r="30" fill="#29e"></circle>
<use xlink:href="#circle" transform="translate(70, 0)" style="stroke: red; pointer-events: none;"></use>
</svg>
<p>ctrl+click on right circle</p>
Or declare that all use elements must not be clickable with <style>use{pointer-events: none;}</style>.
Obviously, this workaround is applicable only in case the element has NOT to be interactive at all.