svg

问题 I have a list of points and want to connect them as smoothly as possible. I have a function that I evaluate to get these points. I could simply use more sampling points but that would only increase the SVG file size. I think using a piecewise cubic Bezier curve would be better suited. How do I do this? I did some research and came across the svgpathtools package, which looked promising. However, I did not find any functionality like this. 回答1: If you ever used Illustrator you certainly

问题 I have some SVG text that works fine on Firefox but in Chrome and Safari does not appear. I have tried: Adding padding to the svg container in case the text was being cut-off, Removing [xml:space="preserve'] from the text, Adding a fill color inline. <svg class="fraction_spinner" width="64" height="64" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle id="CS1_01-intro" cx="32" cy="32" r="25" fill="transparent"/> <text class="spinner-text spinner-text__casestudy" xml:space="preserve">

问题 I'm trying to develop a custom shape in D3, but I'm a little green Javascript wise and am not sure what the D3-Shapes library is doing under the hood. In particular, I'm not sure what the default function in symbol.js is doing or how it is used. From the little bit of JS that I do know it appears to be describing a prototype or possibly a class. Supposedly one may register additional shapes using the symbol.type class/function but I'm not sure how I should be calling this e.g. var symbol =

问题 This question already has answers here : SVG USE element and :hover style (3 answers) Closed 3 months ago . It's strange that I couldn't find anyone else reporting this problem; that makes me think perhaps I am doing something wrong. I have a <style> tag within an SVG that contains a :hover pseudo-class, it works properly when the SVG is directly embedded into the HTML, but when I put it within a symbol and reference it with a <use> tag, the styles inside the <style> tag are not applied. SVG

问题 https://jsfiddle.net/swoq9g3f/1/ I am having a problem where a simple SVG is drawn incorrectly in Internet Explorer (v11.0.9600.17728) after I change a xlink:href with javascript. If you render just the SVG in IE you get two concentric circles. The javascript sets the xlink:href value for a <use> element to #def1 , which is the value it was previously. After this IE renders only the larger circle, with the smaller circle hidden behind it. The smaller circle is later in the svg document

问题 i have build a path Animation, but i have a problem with the sawblade in the svg. I want to animate die Sawblade (rotate 360). <style>html { background-color: #337ab7; } .cutline { stroke: #222; stroke-width: .1%; stroke-width: .5%; stroke-dasharray: 1% 2%; stroke-linecap: round; fill: none; } .sawblade { fill: #eee; width: 200px; height: auto; margin: 30px; } </style> <svg viewBox="0 0 3387 1270"> <path id="cutline" class="cutline" d="M 2700 1000 L 100 1000 " /> <g class="sawblade"> <path id

问题 I'm drawing in a <path> which takes the form of a rectangle, with the following code: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 70 51" enable-background="new 0 0 70 51" xml:space="preserve"> <path fill="#FFFFFF" stroke="#000" stroke-miterlimit="10" d="M18.8,50.5h-7.9V29.7h7.9V50.5z"/> </svg> With the following CSS code to animate it using this method: svg { max-width: 200px; position: absolute; top: 0; left: 0

问题 I have the following SVG that I use inline: <svg width="30" height="23" viewBox="0 0 1398 1648"><path d="M1110.5 1008.81q37.8031 0 64.4934 -26.7359q26.6902 -26.7359 26.6902 -64.4477q0 -37.7118 -26.6902 -64.4477q-26.6902 -26.7359 -64.4934 -26.7359q-37.6729 0 -64.4282 26.7554q-26.7554 26.7554 -26.7554 64.4282q0 37.712 26.69 64.4478 q26.69 26.7358 64.4936 26.7358zM1085.83 924.412q10.313 0 17.6013 7.33401q7.28831 7.33401 7.28831 17.5547q0 10.352 -7.26875 17.6203q-7.26875 7.26836 -17.6209 7.26836q

问题 I have the following SVG that I use inline: <svg width="30" height="23" viewBox="0 0 1398 1648"><path d="M1110.5 1008.81q37.8031 0 64.4934 -26.7359q26.6902 -26.7359 26.6902 -64.4477q0 -37.7118 -26.6902 -64.4477q-26.6902 -26.7359 -64.4934 -26.7359q-37.6729 0 -64.4282 26.7554q-26.7554 26.7554 -26.7554 64.4282q0 37.712 26.69 64.4478 q26.69 26.7358 64.4936 26.7358zM1085.83 924.412q10.313 0 17.6013 7.33401q7.28831 7.33401 7.28831 17.5547q0 10.352 -7.26875 17.6203q-7.26875 7.26836 -17.6209 7.26836q

问题 I am trying to make a circle like this. I was able to make it in the fiddle, but the problem is that I need each orange side to be a link and I can't do it with borders. If anyone can help me with this I will be really grateful. #circle { width: 200px; height: 200px; border-radius: 50%; background: green; } #incircle { width: 100px; height: 100px; border-radius: 50%; border: 50px dotted orange; } <div id="circle"> <div id="incircle"></div> </div> 回答1: The key to creating a circle with