Javascript SVG place arrow on bezier [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I have a cubic bezier. And I don't know how to put an arrow in the middle of it. Example below:
I want it to be like this, but with bezier. How can I do this.
Note: I've tried textPaths, markers. But nothing helped.

You have two options:
Position the marker(s), yourself, at the correct place
Split the line into two paths. One up to the first marker, and one for the rest of the path. Then assign an end marker on each path.

#1 Solution
I thank #Paul LeBeau, who found a solution and below the implementation:
We make two patches: a straight line and a curve at the end of which
there will also be markers.
<path id="line_Path" d="m20.8 22.9c0 0 47.7-0.3 68.9-0.1" />
<path id="curve_Path" d="m89.5 22.9c0 0 7.3 0 7.3 6.5 0 24 0 65.4 0 65.4 0
0-2.5 7.6 7.1 7.6 29.6 0 77.5 0 77.5 0l0 0"/>
For accurate positioning of the marker, the following attributes are
used: refX="10", refY="5"
<svg width="200" height="120" viewBox="0 0 200 120" preserveAspectRatio="xMinYMin meet" border="1">
<defs>
<marker id="MarkerArrow" viewBox="0 0 10 10" refX="10" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="10" markerHeight="10">
<polyline points="0,0 10,5 0,10 3,5" fill="red"/>
</marker>
</defs>
<style>
#line_Path, #curve_Path {
fill:none;
stroke:red;
stroke-width:2;
marker-end:url(#MarkerArrow);
}
</style>
<path id="line_Path" d="m20.8 22.9c0 0 47.7-0.3 68.9-0.1" />
<path id="curve_Path" d="m89.5 22.9c0 0 7.3 0 7.3 6.5 0 24 0 65.4 0 65.4 0 0-2.5 7.6 7.1 7.6 29.6 0 77.5 0 77.5 0l0 0"/>
</svg>
#2 Solution
You can draw an arrow as an independent object
<polyline id="MarkerArrow" points="0,0 10,5 0,10 3,5" fill="red"/>
And place it on the curve the required number of times with the help
of the command
<use xlink:href="#MarkerArrow" x="80" y="18"/>
<svg width="200" height="120" viewBox="0 0 200 120" preserveAspectRatio="xMinYMin meet" border="1">
<defs>
<polyline id="MarkerArrow" points="0,0 10,5 0,10 3,5" fill="red"/>
</defs>
<path d="m20.8 22.9c0 0 47.7-0.3 68.9-0.1 5.4 0 6.8 2.9 6.9 6.8 0.4 22.6-0.8 45.9 0 66.6 0.2 4.2 2.6 6.5 6.6 6.6C129.1 103.1 180 102.2 180 102.2l0.7 0.5" style=" fill:none; stroke:red; stroke-width:2; "/>
<use xlink:href="#MarkerArrow" x="80" y="18"/>
<use xlink:href="#MarkerArrow" x="178" y="97"/>
</svg>

Related

I have an svg I have to move the green bulge like a slider button on the svg path. Any Correct way to do it?

Here is the svg. It's a slider with the green bulge at the top of it.
I have to move the green bulge like a slider button on the svg path and as it moves ahead the slider should turn green.That slider should move when we scroll down the page. It should be on scroll.
I know that I can calculate the stroke length and gap length and can change the stroke-dasharray property. But still not getting it to do in a perfect way.
<svg xmlns="http://www.w3.org/2000/svg" width="57" height="820" viewBox="0 0 57 820" fill="none">
<path d="M14 812C14 813.105 14.8954 814 16 814C17.1045 814 18 813.105 18 812L14 812ZM14 -8.74228e-08L14 812L18 812L18 8.74228e-08L14 -8.74228e-08Z" fill="#E8E8E8"/>
<path d="M36 812H16" stroke="#E8E8E8" stroke-width="4" stroke-linecap="round"/>
<path d="M14 104C14 105.105 14.8954 106 16 106C17.1046 106 18 105.105 18 104L14 104ZM14 -8.74228e-08L14 104L18 104L18 8.74228e-08L14 -8.74228e-08Z" fill="#3DCD58"/>
<g filter="url(#filter0_d_6_14)">
<path d="M15.2627 91.1843L16 91L16.7373 91.1843C17.5428 91.3857 18.2289 91.912 18.6321 92.6378L22.0631 98.8136C24.1837 102.631 24.0635 107.298 21.7492 111.001L18.8813 115.59C18.333 116.467 17.3716 117 16.3373 117H15.6627C14.6284 117 13.667 116.467 13.1187 115.59L10.2508 111.001C7.93651 107.298 7.81629 102.631 9.9369 98.8136L13.3679 92.6378C13.7711 91.912 14.4572 91.3857 15.2627 91.1843Z" fill="#3DCD58"/>
</g>
<path d="M46.7656 819.984H40.6406C39.0729 819.984 37.8333 819.492 36.9219 818.508C35.8646 817.414 35.3724 816.01 35.4453 814.297C35.4818 813.932 35.6641 813.75 35.9922 813.75C36.2474 813.75 36.5755 813.641 36.9766 813.422C37.5234 813.13 37.7969 812.656 37.7969 812C37.7969 811.38 37.5052 810.888 36.9219 810.523C36.5208 810.305 36.1927 810.195 35.9375 810.195C35.6094 810.159 35.4453 809.958 35.4453 809.594C35.4453 807.807 35.9557 806.422 36.9766 805.438C37.9974 804.453 39.2188 803.979 40.6406 804.016H46.7656C46.9115 804.016 47.0391 804.089 47.1484 804.234C47.2943 804.344 47.3672 804.471 47.3672 804.617V806.969H54.5859C55.1328 806.969 55.5885 807.151 55.9531 807.516C56.3177 807.88 56.5 808.372 56.5 808.992C56.5 809.576 56.3177 810.049 55.9531 810.414C55.5885 810.742 55.1328 810.906 54.5859 810.906H47.0391C46.8932 810.906 46.7656 810.852 46.6562 810.742C46.5469 810.596 46.4922 810.451 46.4922 810.305C46.4922 810.122 46.5469 809.977 46.6562 809.867C46.7656 809.758 46.8932 809.703 47.0391 809.703H54.5859H54.6406C54.8594 809.703 55.0234 809.648 55.1328 809.539C55.2786 809.393 55.3516 809.193 55.3516 808.938C55.3516 808.609 55.2422 808.391 55.0234 808.281C54.9141 808.208 54.7682 808.172 54.5859 808.172H46.7656C46.5833 808.172 46.4375 808.117 46.3281 808.008C46.2188 807.898 46.1641 807.753 46.1641 807.57V805.219H40.6406H40.5859C39.4557 805.219 38.526 805.583 37.7969 806.312C37.1042 806.969 36.7214 807.917 36.6484 809.156C36.9401 809.229 37.2318 809.357 37.5234 809.539C38.4714 810.086 38.9453 810.906 38.9453 812C38.9453 812.62 38.7995 813.148 38.5078 813.586C38.2526 813.951 37.9062 814.242 37.4688 814.461C37.2135 814.607 36.9401 814.716 36.6484 814.789C36.7214 816.029 37.0859 817.013 37.7422 817.742C38.4349 818.435 39.401 818.781 40.6406 818.781H46.1641V816.43C46.1641 816.284 46.2188 816.156 46.3281 816.047C46.4375 815.901 46.5833 815.828 46.7656 815.828H54.4766H54.5312C54.8229 815.865 55.0417 815.792 55.1875 815.609C55.2969 815.5 55.3516 815.336 55.3516 815.117C55.3516 814.862 55.2969 814.661 55.1875 814.516C55.0417 814.37 54.8411 814.297 54.5859 814.297H47.0391C46.8932 814.297 46.7656 814.242 46.6562 814.133C46.5469 814.023 46.4922 813.896 46.4922 813.75C46.4922 813.568 46.5469 813.422 46.6562 813.312C46.7656 813.203 46.8932 813.148 47.0391 813.148H54.5859C55.1693 813.148 55.6432 813.331 56.0078 813.695C56.3724 814.023 56.5547 814.497 56.5547 815.117C56.5547 815.664 56.3724 816.12 56.0078 816.484C55.6068 816.849 55.0964 817.031 54.4766 817.031H47.3125V819.383C47.3125 819.529 47.2578 819.674 47.1484 819.82C47.0391 819.93 46.9115 819.984 46.7656 819.984Z" fill="#E8E8E8"/>
<defs>
<filter id="filter0_d_6_14" x="0.426758" y="83" width="31.1465" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="4"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.239216 0 0 0 0 0.803922 0 0 0 0 0.345098 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_6_14"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_6_14" result="shape"/>
</filter>
</defs>
</svg>
Any one has any Idea. Is there any way to achieve it?

Removing gap between two SVG paths without removing anti-aliasing

I have two SVG paths that have a gap between them.
From reading through other questions (in particular this one) I understand this is because of the native anti-aliasing properties of SVGs.
So I added shapeRendering="crispEdges"
This does remove the gap. However it results in jagged edges because of the removal of anti-aliasing.
<svg height="300" width="300" shapeRendering="crispEdges">
<path
d="M150 10 a120 120 0 0 1 103.9230 60"
fill="none"
stroke="green"
stroke-width="20"
/>
<path
d="M253.9230 70 a120 120 0 0 1 0 120"
fill="none"
stroke="green"
stroke-width="20"
/>
</svg>
I've also tried the suggestion in this question to add crispEdges to the parent svg of the path and add shapeRendering="optimizeQuality" to the path but that didn't work.
How can I remove the gap AND keep the smooth edges of my svg path?
You could also mitigate this gap rendering effect by applying a subtle svg feMorphology dilate filter – resulting in slightly expanded strokes closing thin gaps between paths:
SVG feMorphology filter
svg {
overflow: visible;
}
.chart path {
filter: url(#outline);
}
path:hover {
stroke: red;
}
<svg height="300" width="300" shape-rendering="geometricPrecision">
<g class="original">
<path d="M150 10 a120 120 0 0 1 103.9230 60" fill="none" stroke="green" stroke-width="20" />
<path d="M253.9230 70 a120 120 0 0 1 0 120" fill="none" stroke="green" stroke-width="20" />
</g>
<text x="50%" y="50%">Original</text>
</svg>
<svg height="300" width="300">
<filter filterUnits="userSpaceOnUse" id="outline" >
<feMorphology in="SourceGraphic" result="DILATED" operator="dilate" radius="0.5" />
</filter>
<g class="chart">
<path d="M150 10 a120 120 0 0 1 103.9230 60" fill="none" stroke="green" stroke-width="20" />
<path d="M253.9230 70 a120 120 0 0 1 0 120" fill="none" stroke="green" stroke-width="20" />
</g>
<text x="50%" y="50%">Dilate filter</text>
</svg>
But this approach will also introduce slightly rounded edges (you can see this effect on hover).
More importantly, svg filters are quite expensive with regards to rendering performance – rather negligible if you only display a few elements per page view.
Add concatenated background path
As suggested by #Robert Longson: you could also prepend a background path based on concatenated d path data.
This task could be achieved with a javaScript helper method cloning the first path and displaying the concatenated paths.
addBgPaths(".addBGPath");
function addBgPaths(selector) {
let addPathSvgs = document.querySelectorAll(selector);
addPathSvgs.forEach(function(svg) {
let paths = document.querySelectorAll(".addBGPath path");
let firstPath = paths[0];
let firstPathCloned = firstPath.cloneNode();
//cloned elements shouldn't have ids to avoid non unique ids
firstPathCloned.removeAttribute("id");
let dArr = [firstPath.getAttribute("d")];
for (let i = 1; i < paths.length; i++) {
let path = paths[i];
let d = path.getAttribute("d");
dArr.push(d);
}
firstPathCloned.setAttribute("d", dArr.join(" "));
svg.insertBefore(firstPathCloned, svg.children[0]);
});
}
<svg height="300" width="300" shape-rendering="geometricPrecision">
<path d="M150 10 a120 120 0 0 1 103.9230 60" fill="none" stroke="green" stroke-width="20" />
<path d="M253.9230 70 a120 120 0 0 1 0 120" fill="none" stroke="green" stroke-width="20" />
<text x="0" y="50%">Original</text>
</svg>
<svg class="addBGPath" height="300" width="300" shape-rendering="geometricPrecision">
<path id="first2" d="M150 10 a120 120 0 0 1 103.9230 60" fill="none" stroke="green" stroke-width="20" />
<path d="M253.9230 70 a120 120 0 0 1 0 120" fill="none" stroke="green" stroke-width="20" />
<text x="0" y="50%">Add bg path</text>
</svg>
<svg class="addBGPath" height="300" width="300" shape-rendering="geometricPrecision">
<path id="first" d="M150 10 a120 120 0 0 1 103.9230 60" fill="none" stroke="green" stroke-width="20" />
<path d="M253.9230 70 a120 120 0 0 1 0 120" fill="none" stroke="red" stroke-width="20" />
<text x="0" y="50%">Add bg path (red)</text>
</svg>
<svg height="300" width="300" shape-rendering="geometricPrecision">
<path d="M150 10 a120 120 0 0 1 103.9230 60" fill="none" stroke="green" stroke-width="20" />
<path d="M253.9230 70 a120 120 0 0 1 0 120" fill="none" stroke="red" stroke-width="20" />
<text x="0" y="50%">Original (red)</text>
</svg>
If all your path segments have the same color, this is probably the most elegant solution.
But this approach will also introduce colored "halos" when segments use different stroke colors (example #3 compared to #4).
If you able to edit the svg in editor, you can overlap like this. The darker green is the intersection between two paths.
As a quick fix, you can make the ends overlap with stroke-linecap="square"
But ideally, you need to create a single path instead of two separate paths.
<svg height="300" width="300" shapeRendering="crispEdges">
<path
d="M150 10 a120 120 0 0 1 103.9230 60"
fill="none"
stroke="green"
stroke-width="20"
stroke-linecap="square"
/>
<path
d="M253.9230 70 a120 120 0 0 1 0 120"
fill="none"
stroke="green"
stroke-width="20"
stroke-linecap="square"
/>
</svg>

How to prepare SVG code from Inkscape for Angular JS / Angular Material app directive template

I forked a CodePen app by the Angular Material Team and am trying to replace their user avatar icon with an icon I made in Inkscape.
This is their code, in an app directive template field:
<svg class="user-avatar" viewBox="0 0 128 128" height="64" width="64" pointer-events="none" display="block" > <path fill="#FF8A80" d="M0 0h128v128H0z"/> <path fill="#FFE0B2" d="M36.3 94.8c6.4 7.3 16.2 12.1 27.3 12.4 10.7-.3 20.3-4.7 26.7-11.6l.2.1c-17-13.3-12.9-23.4-8.5-28.6 1.3-1.2 2.8-2.5 4.4-3.9l13.1-11c1.5-1.2 2.6-3 2.9-5.1.6-4.4-2.5-8.4-6.9-9.1-1.5-.2-3 0-4.3.6-.3-1.3-.4-2.7-1.6-3.5-1.4-.9-2.8-1.7-4.2-2.5-7.1-3.9-14.9-6.6-23-7.9-5.4-.9-11-1.2-16.1.7-3.3 1.2-6.1 3.2-8.7 5.6-1.3 1.2-2.5 2.4-3.7 3.7l-1.8 1.9c-.3.3-.5.6-.8.8-.1.1-.2 0-.4.2.1.2.1.5.1.6-1-.3-2.1-.4-3.2-.2-4.4.6-7.5 4.7-6.9 9.1.3 2.1 1.3 3.8 2.8 5.1l11 9.3c1.8 1.5 3.3 3.8 4.6 5.7 1.5 2.3 2.8 4.9 3.5 7.6 1.7 6.8-.8 13.4-5.4 18.4-.5.6-1.1 1-1.4 1.7-.2.6-.4 1.3-.6 2-.4 1.5-.5 3.1-.3 4.6.4 3.1 1.8 6.1 4.1 8.2 3.3 3 8 4 12.4 4.5 5.2.6 10.5.7 15.7.2 4.5-.4 9.1-1.2 13-3.4 5.6-3.1 9.6-8.9 10.5-15.2M76.4 46c.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.9 0-1.6-.7-1.6-1.6-.1-.9.7-1.6 1.6-1.6zm-25.7 0c.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.9 0-1.6-.7-1.6-1.6-.1-.9.7-1.6 1.6-1.6z"/> <path fill="#E0F7FA" d="M105.3 106.1c-.9-1.3-1.3-1.9-1.3-1.9l-.2-.3c-.6-.9-1.2-1.7-1.9-2.4-3.2-3.5-7.3-5.4-11.4-5.7 0 0 .1 0 .1.1l-.2-.1c-6.4 6.9-16 11.3-26.7 11.6-11.2-.3-21.1-5.1-27.5-12.6-.1.2-.2.4-.2.5-3.1.9-6 2.7-8.4 5.4l-.2.2s-.5.6-1.5 1.7c-.9 1.1-2.2 2.6-3.7 4.5-3.1 3.9-7.2 9.5-11.7 16.6-.9 1.4-1.7 2.8-2.6 4.3h109.6c-3.4-7.1-6.5-12.8-8.9-16.9-1.5-2.2-2.6-3.8-3.3-5z"/> <circle fill="#444" cx="76.3" cy="47.5" r="2"/> <circle fill="#444" cx="50.7" cy="47.6" r="2"/> <path fill="#444" d="M48.1 27.4c4.5 5.9 15.5 12.1 42.4 8.4-2.2-6.9-6.8-12.6-12.6-16.4C95.1 20.9 92 10 92 10c-1.4 5.5-11.1 4.4-11.1 4.4H62.1c-1.7-.1-3.4 0-5.2.3-12.8 1.8-22.6 11.1-25.7 22.9 10.6-1.9 15.3-7.6 16.9-10.2z"/> </svg>
The code I see in Inkscape's XML editor or when opening the SVG file with Notepad++ is quite a bit different:
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="210mm"
height="297mm"
viewBox="0 0 744.09448819 1052.3622047"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="rb icon.svg">
<defs
id="defs4">
<linearGradient
id="linearGradient4179"
osb:paint="solid">
<stop
style="stop-color:#000000;stop-opacity:1;"
offset="0"
id="stop4181" />
</linearGradient>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.6394886"
inkscape:cx="-607.16873"
inkscape:cy="903.12934"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
showborder="false"
showguides="false"
inkscape:window-width="1536"
inkscape:window-height="801"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<circle
style="fill:#009cf0;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
id="path3336"
cx="-602.85712"
cy="69.505058"
r="151.42857" />
<rect
style="fill:#ffffff;fill-opacity:1"
id="rect4158"
width="193.80003"
height="144.85301"
x="-699.19604"
y="24.652056" />
<rect
style="fill:#ffffff;fill-opacity:1"
id="rect4162"
width="155.71428"
height="155.71428"
x="373.2374"
y="322.82352"
transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)" />
<rect
style="fill:#ffffff;fill-opacity:1"
id="rect4173"
width="19.512196"
height="71.951218"
x="-682.92682"
y="-47.637794"
ry="9.7560978" />
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
x="-635.36584"
y="20.654888"
id="text4195"
sodipodi:linespacing="127%"><tspan
sodipodi:role="line"
id="tspan4197"
x="-635.36584"
y="20.654888"
style="line-height:127%;-inkscape-font-specification:'sans-serif, Normal';font-family:sans-serif;font-weight:normal;font-style:normal;font-stretch:normal;font-variant:normal;font-size:60px;text-anchor:start;text-align:start;writing-mode:lr;fill:#009cf0;fill-opacity:1">R</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
x="-597.46344"
y="54.801228"
id="text4199"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan4201"
x="-597.46344"
y="54.801228"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:60px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#009cf0;fill-opacity:1">B</tspan></text>
<path
style="fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:0.67507702;stroke-opacity:1"
d="m -505.412,36.002405 20.333,0 0,38.1298 -20.333,0 z"
id="rect4207"
inkscape:connector-curvature="0" />
<path
style="fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:0.67507702;stroke-opacity:1"
d="m -719.52832,35.102183 20.337,0 0,38.1298 -20.337,0 z"
id="rect4207-6"
inkscape:connector-curvature="0" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none"
id="rect4307"
width="47.575813"
height="54.895168"
x="-626.08392"
y="115.31452" />
</g>
</svg>
and when I try replacing the default user avatar SVG with mine it breaks the website. The web console says
Uncaught SyntaxError: Invalid or unexpected token.
Here's the directive with the original SVG:
app.directive('userAvatar', function() {
return {
replace: true,
template: '<svg class="user-avatar" viewBox="0 0 128 128" height="64" width="64" pointer-events="none" display="block" > <path fill="#FF8A80" d="M0 0h128v128H0z"/> <path fill="#FFE0B2" d="M36.3 94.8c6.4 7.3 16.2 12.1 27.3 12.4 10.7-.3 20.3-4.7 26.7-11.6l.2.1c-17-13.3-12.9-23.4-8.5-28.6 1.3-1.2 2.8-2.5 4.4-3.9l13.1-11c1.5-1.2 2.6-3 2.9-5.1.6-4.4-2.5-8.4-6.9-9.1-1.5-.2-3 0-4.3.6-.3-1.3-.4-2.7-1.6-3.5-1.4-.9-2.8-1.7-4.2-2.5-7.1-3.9-14.9-6.6-23-7.9-5.4-.9-11-1.2-16.1.7-3.3 1.2-6.1 3.2-8.7 5.6-1.3 1.2-2.5 2.4-3.7 3.7l-1.8 1.9c-.3.3-.5.6-.8.8-.1.1-.2 0-.4.2.1.2.1.5.1.6-1-.3-2.1-.4-3.2-.2-4.4.6-7.5 4.7-6.9 9.1.3 2.1 1.3 3.8 2.8 5.1l11 9.3c1.8 1.5 3.3 3.8 4.6 5.7 1.5 2.3 2.8 4.9 3.5 7.6 1.7 6.8-.8 13.4-5.4 18.4-.5.6-1.1 1-1.4 1.7-.2.6-.4 1.3-.6 2-.4 1.5-.5 3.1-.3 4.6.4 3.1 1.8 6.1 4.1 8.2 3.3 3 8 4 12.4 4.5 5.2.6 10.5.7 15.7.2 4.5-.4 9.1-1.2 13-3.4 5.6-3.1 9.6-8.9 10.5-15.2M76.4 46c.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.9 0-1.6-.7-1.6-1.6-.1-.9.7-1.6 1.6-1.6zm-25.7 0c.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.9 0-1.6-.7-1.6-1.6-.1-.9.7-1.6 1.6-1.6z"/> <path fill="#E0F7FA" d="M105.3 106.1c-.9-1.3-1.3-1.9-1.3-1.9l-.2-.3c-.6-.9-1.2-1.7-1.9-2.4-3.2-3.5-7.3-5.4-11.4-5.7 0 0 .1 0 .1.1l-.2-.1c-6.4 6.9-16 11.3-26.7 11.6-11.2-.3-21.1-5.1-27.5-12.6-.1.2-.2.4-.2.5-3.1.9-6 2.7-8.4 5.4l-.2.2s-.5.6-1.5 1.7c-.9 1.1-2.2 2.6-3.7 4.5-3.1 3.9-7.2 9.5-11.7 16.6-.9 1.4-1.7 2.8-2.6 4.3h109.6c-3.4-7.1-6.5-12.8-8.9-16.9-1.5-2.2-2.6-3.8-3.3-5z"/> <circle fill="#444" cx="76.3" cy="47.5" r="2"/> <circle fill="#444" cx="50.7" cy="47.6" r="2"/> <path fill="#444" d="M48.1 27.4c4.5 5.9 15.5 12.1 42.4 8.4-2.2-6.9-6.8-12.6-12.6-16.4C95.1 20.9 92 10 92 10c-1.4 5.5-11.1 4.4-11.1 4.4H62.1c-1.7-.1-3.4 0-5.2.3-12.8 1.8-22.6 11.1-25.7 22.9 10.6-1.9 15.3-7.6 16.9-10.2z"/> </svg>'
};
});
I've tried a dozen variations on this, but using a 1-line style where I insert only class="user-avatar" into the new XML here is what the updated directive looks like:
app.directive('userAvatar', function() {
return {
replace: true,
//template: '<svg class="user-avatar" viewBox="0 0 128 128" height="64" width="64" pointer-events="none" display="block" > <path fill="#FF8A80" d="M0 0h128v128H0z"/> <path fill="#FFE0B2" d="M36.3 94.8c6.4 7.3 16.2 12.1 27.3 12.4 10.7-.3 20.3-4.7 26.7-11.6l.2.1c-17-13.3-12.9-23.4-8.5-28.6 1.3-1.2 2.8-2.5 4.4-3.9l13.1-11c1.5-1.2 2.6-3 2.9-5.1.6-4.4-2.5-8.4-6.9-9.1-1.5-.2-3 0-4.3.6-.3-1.3-.4-2.7-1.6-3.5-1.4-.9-2.8-1.7-4.2-2.5-7.1-3.9-14.9-6.6-23-7.9-5.4-.9-11-1.2-16.1.7-3.3 1.2-6.1 3.2-8.7 5.6-1.3 1.2-2.5 2.4-3.7 3.7l-1.8 1.9c-.3.3-.5.6-.8.8-.1.1-.2 0-.4.2.1.2.1.5.1.6-1-.3-2.1-.4-3.2-.2-4.4.6-7.5 4.7-6.9 9.1.3 2.1 1.3 3.8 2.8 5.1l11 9.3c1.8 1.5 3.3 3.8 4.6 5.7 1.5 2.3 2.8 4.9 3.5 7.6 1.7 6.8-.8 13.4-5.4 18.4-.5.6-1.1 1-1.4 1.7-.2.6-.4 1.3-.6 2-.4 1.5-.5 3.1-.3 4.6.4 3.1 1.8 6.1 4.1 8.2 3.3 3 8 4 12.4 4.5 5.2.6 10.5.7 15.7.2 4.5-.4 9.1-1.2 13-3.4 5.6-3.1 9.6-8.9 10.5-15.2M76.4 46c.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.9 0-1.6-.7-1.6-1.6-.1-.9.7-1.6 1.6-1.6zm-25.7 0c.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.9 0-1.6-.7-1.6-1.6-.1-.9.7-1.6 1.6-1.6z"/> <path fill="#E0F7FA" d="M105.3 106.1c-.9-1.3-1.3-1.9-1.3-1.9l-.2-.3c-.6-.9-1.2-1.7-1.9-2.4-3.2-3.5-7.3-5.4-11.4-5.7 0 0 .1 0 .1.1l-.2-.1c-6.4 6.9-16 11.3-26.7 11.6-11.2-.3-21.1-5.1-27.5-12.6-.1.2-.2.4-.2.5-3.1.9-6 2.7-8.4 5.4l-.2.2s-.5.6-1.5 1.7c-.9 1.1-2.2 2.6-3.7 4.5-3.1 3.9-7.2 9.5-11.7 16.6-.9 1.4-1.7 2.8-2.6 4.3h109.6c-3.4-7.1-6.5-12.8-8.9-16.9-1.5-2.2-2.6-3.8-3.3-5z"/> <circle fill="#444" cx="76.3" cy="47.5" r="2"/> <circle fill="#444" cx="50.7" cy="47.6" r="2"/> <path fill="#444" d="M48.1 27.4c4.5 5.9 15.5 12.1 42.4 8.4-2.2-6.9-6.8-12.6-12.6-16.4C95.1 20.9 92 10 92 10c-1.4 5.5-11.1 4.4-11.1 4.4H62.1c-1.7-.1-3.4 0-5.2.3-12.8 1.8-22.6 11.1-25.7 22.9 10.6-1.9 15.3-7.6 16.9-10.2z"/> </svg>'
template: '<svg class="user-avatar" xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="210mm" height="297mm" viewBox="0 0 744.09448819 1052.3622047" id="svg2" version="1.1" inkscape:version="0.91 r13725" sodipodi:docname="rb icon.svg"> <defs id="defs4"> <linearGradient id="linearGradient4179" osb:paint="solid"> <stop style="stop-color:#000000;stop-opacity:1;" offset="0" id="stop4181" /> </linearGradient> </defs> <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="1.6394886" inkscape:cx="-607.16873" inkscape:cy="903.12934" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="false" showborder="false" showguides="false" inkscape:window-width="1536" inkscape:window-height="801" inkscape:window-x="-8" inkscape:window-y="-8" inkscape:window-maximized="1" /> <metadata id="metadata7"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> <dc:title></dc:title> </cc:Work> </rdf:RDF> </metadata> <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1"> <circle style="fill:#009cf0;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1" id="path3336" cx="-602.85712" cy="69.505058" r="151.42857" /> <rect style="fill:#ffffff;fill-opacity:1" id="rect4158" width="193.80003" height="144.85301" x="-699.19604" y="24.652056" /> <rect style="fill:#ffffff;fill-opacity:1" id="rect4162" width="155.71428" height="155.71428" x="373.2374" y="322.82352" transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)" /> <rect style="fill:#ffffff;fill-opacity:1" id="rect4173" width="19.512196" height="71.951218" x="-682.92682" y="-47.637794" ry="9.7560978" /> <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;" x="-635.36584" y="20.654888" id="text4195" sodipodi:linespacing="127%"><tspan sodipodi:role="line" id="tspan4197" x="-635.36584" y="20.654888" style="line-height:127%;-inkscape-font-specification:'sans-serif, Normal';font-family:sans-serif;font-weight:normal;font-style:normal;font-stretch:normal;font-variant:normal;font-size:60px;text-anchor:start;text-align:start;writing-mode:lr;fill:#009cf0;fill-opacity:1">R</tspan></text> <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" x="-597.46344" y="54.801228" id="text4199" sodipodi:linespacing="125%"><tspan sodipodi:role="line" id="tspan4201" x="-597.46344" y="54.801228" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:60px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#009cf0;fill-opacity:1">B</tspan></text> <path style="fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:0.67507702;stroke-opacity:1" d="m -505.412,36.002405 20.333,0 0,38.1298 -20.333,0 z" id="rect4207" inkscape:connector-curvature="0" /> <path style="fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:0.67507702;stroke-opacity:1" d="m -719.52832,35.102183 20.337,0 0,38.1298 -20.337,0 z" id="rect4207-6" inkscape:connector-curvature="0" /> <rect style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none" id="rect4307" width="47.575813" height="54.895168" x="-626.08392" y="115.31452" /> </g> </svg>'
};
});
You can reproduce the error by replacing the original directive with the one above in the CodePen app.
Original: https://codepen.io/team/AngularMaterial/pen/mVxgbg
Broken: https://codepen.io/hack-r/pen/LRdVPN
It is tipical " ,' problem You have ' inside Your string representing svg, change all ' to " and it will work. First of them in svg is 'sans-serif, Normal'.
Your code breaks because string starts on ' and ends on first ' which is inside svg string so next part of code has error syntax.

HTML5 SVG anti-aliasing causes grey line between paths. How to avoid it?

There is an imaginary square which I want to draw as two halves, i.e. two triangles. Whilst they should perfectly fit together and make a square, a tiny line caused by anti-aliasing appears.
These triangles should be of different color, but I left both them black in the given example to make the line more visible.
<svg width="100" height="100"
viewPort="0 0 100 100" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="first">
<path d="M 0 0 L 100 100 L 0 100 Z" fill="red"/>
</clipPath>
<clipPath id="second">
<path d="M 0 0 L 100 0 L 100 100 Z" fill="red"/>
</clipPath>
</defs>
<rect width="100" fill="black" height="100"
clip-path="url(#first)"/>
<rect width="100" fill="black" height="100"
clip-path="url(#second)"/>
</svg>
JSFiddle
I am open to solutions - canvas, WebGL etc. I just want to know possible solutions which would improve rendering.
I'm not sure why you are seeing the line using clip paths, but if I just change it around to using regular polygons and use shape-rendering: crispEdges the line doesn't appear:
<svg width="100" height="100" viewPort="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 100,0 100,100" style="fill:black;shape-rendering:crispEdges;" />
<polygon points="0,0 100,100 0,100" style="fill:black;shape-rendering:crispEdges;" />
</svg>

How to animate changing path lengths (line) with markers in svg

I have this svg path:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width='500' height='500'>
<defs id="def">
<marker orient="auto" refY="0.0" refX="-3" id="Arrow2Mend" style="overflow:visible;">
<path id="path3900" style="fill-rule:evenodd;stroke-width:0.62500000;stroke-linejoin:round;" d="M -15 -5 L 0 0 L -15 5 z" transform="scale(0.5)"></path>
</marker>
</defs>
<path style="fill:none;stroke:#000000;stroke-width:2.58384609;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;marker-end:url(#Arrow2Mend)" d="m 189,100.09448 200,0" id="arrowline"></path></svg>
I want to be able to increase and decrease the length of the "#arrowline" path, with an animation, keeping the arrowhead also in the correct place while animating. I tried various methods but they were either too complicated for implementing or didn't work. Probably I am missing something. Any help appreciated. Thank you.
I don't know what you mean by "correct" - do you mean the following?
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width='500px' height='500px'>
<defs id="def">
<marker orient="auto" refY="0.0" refX="-3" id="Arrow2Mend" style="overflow:visible;">
<path id="path3900" style="fill-rule:evenodd;stroke-width:0.62500000;stroke-linejoin:round;" d="M -15 -5 L 0 0 L -15 5 z" transform="scale(0.5)"></path>
</marker>
</defs>
<path style="fill:none;stroke:#000000;stroke-width:2.58384609;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;marker-end:url(#Arrow2Mend)" d="m 10 10 l200,0" id="arrowline">
<animate attributeName="d" from="m 10 10 l200,0" to="m 10 10 l400,0" dur="1s" repeatCount="indefinite"/>
</path>
</svg>

Categories

Resources