主页 / user-342397

Leonid's questions

Martin Hope
Leonid
Asked: 2022-07-24 20:16:37 +0000 UTC
  • 2

我正在尝试使用一系列过滤器获取图像的轮廓SVG。在片段上，您可以切换图像并打开/关闭过滤器覆盖。

let img_sources = [
    "https://image.freepik.com/free-vector/flat-car-poster-with-photo-horizontal_52683-64510.jpg",
    "https://cdn.sstatic.net/Img/teams/teams-illo-free-sidebar-promo.svg?v=47faa659a05e",
    "https://image.freepik.com/free-vector/enjoy-summer-3d-realistic-background-with-clouds-daisies-grass-leaves-product-podium_87521-3206.jpg",
    "https://image.freepik.com/free-vector/linear-flat-wedding-monograms_52683-64319.jpg",
    "https://image.freepik.com/free-vector/gradient-grainy-gradient-shapes_23-2148975080.jpg",
    "https://image.freepik.com/free-photo/metallic-gold-green-leaves-textured-background_53876-101336.jpg",
    "https://image.freepik.com/free-psd/friends-representing-inclusion-concept-with-mock-up-t-shirts_23-2148997994.jpg",
    "https://image.freepik.com/free-psd/3d-space-rocket-with-smoke_23-2148938939.jpg"
];

let image = document.querySelector('image');
let container = document.getElementById('inputContainer');

let input_range = document.createElement('input');
let range_label = document.createElement('label');
range_label.textContent = 'ИЗОБРАЖЕНИЯ';
range_label.style.marginRight = '20px';
input_range.type = 'range';
input_range.min = 0;
input_range.max = img_sources.length - 1;
input_range.value = 0;
input_range.addEventListener('change', e => {
    draw(e.target.value);
})
container.append(input_range);
container.append(range_label);

draw();

let input_checkbox = document.createElement('input');
let checkbox_label = document.createElement('label');
input_checkbox.checked = true;
checkbox_label.textContent = 'ФИЛЬТР';
input_checkbox.type = 'checkbox';
input_checkbox.addEventListener('change', e => {
    image.setAttribute('style', e.target.checked ? "filter: url(#filter)" : "");
});
container.append(input_checkbox);
container.append(checkbox_label);

function draw(val=0){
    image.setAttribute('href', img_sources[val]);
}
<svg viewbox="0 0 400 200">
    <filter id="filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
        <feMorphology operator="dilate" radius="0.5 0.5" x="0%" y="0%" width="100%" height="100%" in="SourceGraphic" result="morphology"/>
        <feBlend mode="difference" x="0%" y="0%" width="100%" height="100%" in="SourceGraphic" in2="morphology" result="blend"/>
        <feColorMatrix type="luminanceToAlpha" x="0%" y="0%" width="100%" height="100%" in="blend" result="colormatrix3"/>
    </filter>
    <image id="filtered" href="" height="200" width="200" style="filter: url(#filter)"/>
</svg>
<div id="inputContainer" style="position: fixed; top: 4px; left: 4px"></div>

但是在接收到不同程度强度的轮廓后，我无法得到轮廓“暗度”的均匀性，也无法通过增加对比度来表现出来。我尝试将contrast(200%)过滤器添加到链中，但它根本没有任何效果。

理想情况下，增加对比度后，将生成的图像放在黑色背景上，并使用蒙版或其他工具提取清晰的黑线。如何才能做到这一点？

javascript
Martin Hope
Leonid
Asked: 2022-07-21 03:34:16 +0000 UTC
  • 2

我正在做一个原始的波浪动画。但是遇到了问题。第一条贝塞尔曲线与后面的不一致，因此，我不得不将这部分隐藏在画布后面。

您如何简化动画，因为现在每次都会创建新路径？

我怀疑可以绘制一个元素，一个半波，例如，它可以使用模式重复。但是波浪的高度、宽度以及未来的坡度可以改变。这就是为什么我不想让这个瓷砖“在石头上”。您如何使这个重复元素可停靠并同时以编程方式更改？可以用 SVG 和 CSS 动画解决吗？

开头隐藏波浪的示例：

const SPEED = 0.05;
const WAVE_WIDTH = 100;
const WAVE_HEIGHT = 50;
const CANVAS_WIDTH = 600;
const CANVAS_HEIGHT = 200;

let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

let w = canvas.width = CANVAS_WIDTH;
let h = canvas.height = CANVAS_HEIGHT;

ctx.fillStyle = 'blue';

let wave_fase = 0;

draw();

function draw(){
    ctx.clearRect(0,0,w,h);
    
    let waves_path_string = `M ${WAVE_WIDTH*(wave_fase - 3)} ${h}
                            V ${h/2 - WAVE_HEIGHT/2}
                            q ${WAVE_WIDTH/2} ${-WAVE_HEIGHT/2} ${WAVE_WIDTH} ${WAVE_HEIGHT/2} `;
    
    waves_path_string += 't' + ` ${WAVE_WIDTH} 0`.repeat(w/WAVE_WIDTH + 3) + ` V ${h} z`;
    
    ctx.fill(new Path2D(waves_path_string));
    
    wave_fase = (wave_fase + SPEED)%2;
    
    requestAnimationFrame(draw);
}
<canvas></canvas>

在这里你可以看到第一波，它不想融入一般行。

const SPEED = 0.01;
const WAVE_WIDTH = 60;
const WAVE_HEIGHT = 40;
const CANVAS_WIDTH = 600;
const CANVAS_HEIGHT = 200;

let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

let w = canvas.width = CANVAS_WIDTH;
let h = canvas.height = CANVAS_HEIGHT;

ctx.fillStyle = 'blue';

let wave_fase = 0;

draw();

function draw(){
    ctx.clearRect(0,0,w,h);
    
    let waves_path_string = `M ${WAVE_WIDTH*wave_fase} ${h}
                              V ${h/2 - WAVE_HEIGHT/2}
                              q ${WAVE_WIDTH/2} ${-WAVE_HEIGHT/2} ${WAVE_WIDTH} ${WAVE_HEIGHT/2} `;
    
    waves_path_string += 't' + ` ${WAVE_WIDTH} 0`.repeat(w/WAVE_WIDTH) + ` V ${h} z`;
    
    ctx.fill(new Path2D(waves_path_string));
    
    wave_fase = (wave_fase + SPEED)%2;
    
    requestAnimationFrame(draw);
}
<canvas></canvas>

这是相同的 SVG 代码，属性操作d位于<path>：

const SPEED = 0.05;
const WAVE_WIDTH = 100;
const WAVE_HEIGHT = 50;
const CANVAS_WIDTH = 600;
const CANVAS_HEIGHT = 200;

let svg = document.querySelector('svg');

svg.setAttribute('width',CANVAS_WIDTH);
svg.setAttribute('height',CANVAS_WIDTH);

let wave_fase = 0;

draw();

function draw(){
    
    let waves_path_string = `M ${WAVE_WIDTH*(wave_fase - 3)} ${CANVAS_HEIGHT}
                            V ${CANVAS_HEIGHT/2 - WAVE_HEIGHT/2}
                            q ${WAVE_WIDTH/2} ${-WAVE_HEIGHT/2} ${WAVE_WIDTH} ${WAVE_HEIGHT/2} `;
    
    waves_path_string += 't' + ` ${WAVE_WIDTH} 0`.repeat(CANVAS_WIDTH/WAVE_WIDTH + 3) + ` V ${CANVAS_HEIGHT} z`;
    
    svg.querySelector('path').setAttribute('d', waves_path_string);
    
    wave_fase = (wave_fase + SPEED)%2;
    
    requestAnimationFrame(draw);
}
<svg>
    <path d="" fill="blue"/>
</svg>

javascript
Martin Hope
Leonid
Asked: 2022-07-20 13:53:01 +0000 UTC
  • 2

我指定了视图框以窥视圆的“非理想”交界处可能存在的缺陷，但我只是无法使该部分变大并位于 SVG 的中间。毕竟，我指定了视图框，同时考虑到目标点的相同缩进，左右和上下。

但实际上，我将图像压到了某个边缘。我在这里阅读了所有关于视口 - 视图框的文章，但我没有找到任何关于定位的内容。

您需要看到“60 109.99999 60.00002 110.00001”部分的全部荣耀。

<svg xmlns="http://www.w3.org/2000/svg" viewbox="60 109.99999 60.00002 110.00001">
    <path d="M60 110 A 50 50 0 1 1 60.00001 110 z"
       stroke="black" fill="rgb(180,180,255)"/> 
</svg>

我究竟做错了什么？

svg
Martin Hope
Leonid
Asked: 2022-07-20 02:23:35 +0000 UTC
  • 3

SVG 中的路径是一个通用且强大的工具。但是要在其中画出一个像圆形这样的图形并不是一件容易的事。似乎有A（弧），但我个人能够画一个只有两条弧的圆。在这种情况下，圆心不在任何地方表示；它位于这些弧的端点的中间。我添加了一条白线进行控制。

<svg width="600" height="200" xmlns="http://www.w3.org/2000/svg">
    <path d="M40 100 A 50 50 0 0 1 140 100
                     A 50 50 0 0 1 40 100"
       stroke="black" fill="rgb(180,180,255)"/>        
    <line x1="40" y1="100" x2="140" y2="100" stroke="white"/>
</svg>

您可以使用两个三次贝塞尔曲线绘制一个圆。在我的情况下大约是一个圆圈））

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
    <path d="M40 100 C 40 34 140 34 140 100
                     C 140 166 40 166 40 100"
       stroke="black" fill="rgb(180,180,255)"/>        
    <line x1="40" y1="100" x2="140" y2="100" stroke="white"/>
</svg>

有没有更简单的方法来画一个圆，只用一条线path，让它由一条曲线组成？

svg
Martin Hope
Leonid
Asked: 2022-07-20 00:45:55 +0000 UTC
  • 2

我试图用 JS 控制的 SVG 制作一个小游戏。但是，我遇到了一个问题：如何在 SVG 代码中引入和重用变量？这里要定义宽度和高度<svg>，火球的起始位置（<circle>），边界框的宽度<rect>。那么如何在 JS 中优雅地获取它们呢？

我也欢迎任何关于 SVG 和 JS 的评论。谢谢你。

let svg = document.getElementById('_svg');
let circle = svg.querySelector('circle');
let text = svg.querySelector('text');

let position = [+circle.getAttribute('cx'), +circle.getAttribute('cy')];

let attractionX = 0;
let attractionY = 0;

let score = 0;

let anim;

svg.addEventListener('mousemove', e => {
    attractionX = position[0] < e.clientX ? 1 : -1;
    attractionY = position[1] < e.clientY ? 1 : -1;
})

function animateCircle() {
    position[0] += Math.floor(Math.random()*11) - 5 + attractionX;
    position[1] += Math.floor(Math.random()*11) - 5 + attractionY;
    score++;
    
    circle.setAttribute('cx', position[0]);
    circle.setAttribute('cy', position[1]);
    text.innerHTML = score;
    
    anim = requestAnimationFrame(animateCircle);
    
    if(position[0]<=20 || position[0]>=580 || position[1]<=20 || position[1]>=140){
        cancelAnimationFrame(anim);
        text.style.fill = 'red';
        text.style.fontSize = '20px';
        text.innerHTML = 'GAMEOVER. Your score: ' + score;
    }   
}

animateCircle();
<svg viewbox="0 0 600 160" id="_svg" width="600px" height="160px">
    <circle cx="300" cy="80" r="20" fill="yellow" stroke="black" />
    <rect x="0" y="0" width="600" height="160" stroke="red" fill="none"/>
    <text x="10" y="20">0</text>
</svg>

javascript
Martin Hope
Leonid
Asked: 2022-07-19 21:32:43 +0000 UTC
  • 7

我正在尝试获取 SVG 的宽度。

  1. svg.getBBox().width()--> 40. 求圆的宽度不考虑描边。

  2. svg.width--> 复杂对象，我在其中找到包含属性值的属性 animVal 和 baseVal：300

  3. svg.width.animVal.value--> 300。我得到了我想要的东西，虽然有时是 0。

有没有办法在结果方面更有效、更可靠地获得 SVG 的大小？

因为，那么我有以下几点：我通过样式更改SVG的大小，但是svg.width.animVal.value“没有时间”更新。有时它会成功。在以小延迟（10 毫秒）调用代码后，一切都很好。

let svg = document.getElementById('_svg');

console.log(`BBox.width: ${svg.getBBox().width}`);
console.log(`SVG.width: ${svg.width}`); // Получаю сложный объект
printWidth();

svg.style.width = '600px';
svg.style.height = '200px';

printWidth();

setTimeout(printWidth, 10);

function printWidth(){
    console.log(`SVG.width.animVal.value: ${svg.width.animVal.value}`);
    console.log(`SVG.width.baseVal.value: ${svg.width.baseVal.value}`);
}
<svg fill="yellow" stroke="black" id="_svg">
    <circle cx="25" cy="25" r="20"/> 
</svg>

javascript
Martin Hope
Leonid
Asked: 2022-07-19 05:34:46 +0000 UTC
  • 3

在教程中，您可以看到值为“none”的“fill”属性的使用。尤其是混淆了这样的线条指示！！！

<line fill="none" stroke="black" x1="50" y1="50" x2="200" y2="50"/>

为什么要为一行指定填充？是的，对于其他形状，如果我想让它们保持透明。有默认值吗？填充是否从祖先继承，冲突如何解决？

svg
Martin Hope
Leonid
Asked: 2022-07-19 03:12:58 +0000 UTC
  • 4

有一个画布，在上面绘制文本。画布根据 requestAnimationFrame() 重新绘制，放大每一帧。问题：每次绘制的文本好像在不同的地方，有一个偏移量，结果它在动画上晃动。同时，简单的数字表现得很好。

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let w,h;
w = h = canvas.width = canvas.height = 500;

draw.t = 0;

function draw(){
ctx.clearRect(0, 0, w, h);
    
let scale = draw.t*draw.t * 0.00002;
ctx.save();
ctx.scale(scale, scale);
    
ctx.font = 'bold 50px Sans-serif';
ctx.textBaseline = 'top';
ctx.fillText('Am I shaking?', 0, 0);

ctx.fillRect(0,60,50,50);

ctx.beginPath();
ctx.arc(100, 85, 25, 0, Math.PI*2);
ctx.fill();

ctx.restore();
draw.t++;  
window.requestAnimationFrame(draw);
}

window.requestAnimationFrame(draw);
<canvas id="canvas"></canvas>

所以我正在努力解决这个问题。我首先将文本放在 5000 * 5000 的“隐藏”画布上，然后在每一帧中将图像传输到目标画布。但一开始，图像仍然“播放”，出现一些伪影：

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let w,h;
w = h = canvas.width = canvas.height = 500;

draw.t = 0;

canvas1 = document.createElement('canvas');
canvas1.width = canvas1.height = 5000;
let ctx1 = canvas1.getContext('2d');
ctx1.font = `bold 500px Sans-serif`;
ctx1.textBaseline = 'top';
ctx1.fillText('Am I shaking', 0, 0);

function draw(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    let scale = draw.t*draw.t * 0.00002;
    let index = scale < 3 ? Math.floor(scale) : 3;
    ctx.save();
    ctx.scale(scale,scale);
    ctx.drawImage(canvas1,0,0,5000,5000,0,0,500,500);   
    ctx.restore();
    draw.t++;  
    window.requestAnimationFrame(draw);
}

window.requestAnimationFrame(draw);
<canvas id="canvas"></canvas>

继续前行。我添加了几个“隐藏”画布以在不同的缩放阶段替换它们。结果已经比较顺利，但仍然不理想，解决方案不能称为优雅：

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let w,h;
w = h = canvas.width = canvas.height = 500;

draw.t = 0;

let scale_steps = [2,4,7,10];
let canvases = [];

for(let i=0; i < scale_steps.length; i++){
    canvases[i] = document.createElement('canvas');
    canvases[i].width = canvases[i].height = 500 * scale_steps[i];
    let ctx = canvases[i].getContext('2d');
    ctx.font = `bold ${scale_steps[i] * 50}px Sans-serif`;
    ctx.textBaseline = 'top';
    ctx.fillText('Am I shaking', 0, 0);
}

function draw(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    let scale = draw.t*draw.t * 0.00002;
    let index = scale < 3 ? Math.floor(scale) : 3;
    ctx.save();
    ctx.scale(scale,scale);
    ctx.drawImage(canvases[index],0,0,
                    scale_steps[index]*500,scale_steps[index]*500,0,0,500,500
                    );   
    ctx.restore();
    draw.t++;  
    window.requestAnimationFrame(draw);
}

window.requestAnimationFrame(draw);
<canvas id="canvas"></canvas>

很明显，在 SVG 的帮助下，只需 CSS 动画，您就可以轻松实现所需的效果。但是为什么它在 Canvas 中如此笨拙地工作，可以做些什么呢？是否可以在 Canvas 上呈现 SVG 内容？这会解决问题吗？

至少，使用 SVG 路径可以相当快地解决问题：

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let w,h;
w = h = canvas.width = canvas.height = 500;

draw.t = 0;

function draw(){
    ctx.clearRect(0, 0, w, h);

    let scale = draw.t * draw.t * 0.00002;
    ctx.save();
    ctx.scale(scale, scale);

        ctx.fill(new Path2D("M27.49 32.81l-10.27 0 -1.62 4.64 -6.6 0 9.43 -25.47 7.83 0 9.43 25.47 -6.6 0 -1.6 -4.64zm-8.63 -4.72l6.97 0 -3.47 -10.13 -3.5 10.13zm37.65 -6.57c0.78,-1.19 1.69,-2.08 2.76,-2.71 1.06,-0.62 2.23,-0.92 3.5,-0.92 2.2,0 3.87,0.67 5.02,2.03 1.15,1.35 1.72,3.32 1.72,5.9l0 11.63 -6.15 0 0 -9.96c0.01,-0.14 0.02,-0.3 0.03,-0.45 0,-0.17 0.01,-0.4 0.01,-0.69 0,-1.35 -0.2,-2.33 -0.6,-2.94 -0.4,-0.61 -1.04,-0.91 -1.92,-0.91 -1.16,0 -2.06,0.48 -2.69,1.43 -0.63,0.96 -0.95,2.34 -0.98,4.14l0 9.38 -6.14 0 0 -9.96c0,-2.11 -0.19,-3.47 -0.55,-4.08 -0.36,-0.61 -1.01,-0.91 -1.94,-0.91 -1.17,0 -2.08,0.48 -2.71,1.44 -0.63,0.96 -0.95,2.33 -0.95,4.12l0 9.39 -6.15 0 0 -19.11 6.15 0 0 2.8c0.75,-1.08 1.61,-1.89 2.58,-2.44 0.97,-0.54 2.04,-0.81 3.22,-0.81 1.31,0 2.48,0.32 3.49,0.95 1.01,0.64 1.78,1.53 2.3,2.68zm31.14 -9.54l6.57 0 0 25.47 -6.57 0 0 -25.47zm39.8 6.96l0 4.64c-1.3,-0.54 -2.57,-0.96 -3.78,-1.23 -1.22,-0.28 -2.37,-0.41 -3.45,-0.41 -1.16,0 -2.02,0.15 -2.58,0.44 -0.57,0.29 -0.85,0.73 -0.85,1.34 0,0.49 0.22,0.86 0.65,1.13 0.42,0.25 1.19,0.45 2.3,0.57l1.07 0.16c3.13,0.39 5.23,1.05 6.31,1.96 1.08,0.91 1.62,2.34 1.62,4.28 0,2.03 -0.75,3.56 -2.25,4.58 -1.5,1.03 -3.74,1.54 -6.72,1.54 -1.27,0 -2.57,-0.1 -3.92,-0.3 -1.35,-0.19 -2.73,-0.49 -4.16,-0.89l0 -4.64c1.22,0.59 2.47,1.03 3.75,1.33 1.28,0.3 2.58,0.45 3.9,0.45 1.2,0 2.1,-0.16 2.7,-0.5 0.6,-0.33 0.9,-0.82 0.9,-1.47 0,-0.54 -0.21,-0.95 -0.62,-1.22 -0.41,-0.26 -1.24,-0.47 -2.48,-0.62l-1.08 -0.14c-2.72,-0.34 -4.62,-0.97 -5.71,-1.89 -1.09,-0.92 -1.64,-2.32 -1.64,-4.2 0,-2.02 0.7,-3.52 2.08,-4.5 1.39,-0.97 3.52,-1.46 6.38,-1.46 1.12,0 2.31,0.08 3.54,0.25 1.24,0.17 2.59,0.43 4.04,0.8zm25.09 6.88l0 11.63 -6.15 0 0 -1.89 0 -6.98c0,-1.67 -0.03,-2.81 -0.11,-3.44 -0.07,-0.63 -0.2,-1.09 -0.38,-1.38 -0.24,-0.4 -0.56,-0.71 -0.97,-0.93 -0.41,-0.22 -0.88,-0.33 -1.4,-0.33 -1.27,0 -2.27,0.49 -3,1.47 -0.73,0.99 -1.09,2.35 -1.09,4.09l0 9.39 -6.11 0 0 -26.55 6.11 0 0 10.24c0.92,-1.12 1.9,-1.94 2.94,-2.46 1.03,-0.53 2.17,-0.79 3.43,-0.79 2.2,0 3.87,0.67 5.02,2.03 1.14,1.35 1.71,3.32 1.71,5.9zm14.22 3.04c-1.28,0 -2.24,0.21 -2.88,0.64 -0.65,0.43 -0.97,1.08 -0.97,1.91 0,0.78 0.26,1.38 0.78,1.82 0.52,0.44 1.24,0.66 2.16,0.66 1.15,0 2.12,-0.42 2.91,-1.24 0.79,-0.82 1.18,-1.85 1.18,-3.09l0 -0.7 -3.18 0zm9.33 -2.31l0 10.9 -6.15 0 0 -2.83c-0.82,1.16 -1.75,2 -2.77,2.53 -1.02,0.53 -2.27,0.79 -3.73,0.79 -1.98,0 -3.59,-0.58 -4.82,-1.73 -1.24,-1.15 -1.86,-2.65 -1.86,-4.49 0,-2.24 0.77,-3.88 2.32,-4.93 1.53,-1.04 3.96,-1.57 7.25,-1.57l3.61 0 0 -0.47c0,-0.98 -0.38,-1.69 -1.15,-2.13 -0.76,-0.45 -1.95,-0.68 -3.56,-0.68 -1.31,0 -2.53,0.13 -3.65,0.39 -1.12,0.26 -2.17,0.66 -3.14,1.18l0 -4.64c1.31,-0.33 2.62,-0.57 3.94,-0.73 1.31,-0.17 2.64,-0.25 3.95,-0.25 3.44,0 5.94,0.68 7.46,2.04 1.53,1.36 2.3,3.56 2.3,6.62zm5.68 -15.65l6.12 0 0 14.45 7.02 -7.01 7.09 0 -9.32 8.77 10.06 10.34 -7.4 0 -7.45 -7.96 0 7.96 -6.12 0 0 -26.55zm23.24 7.44l6.11 0 0 19.11 -6.11 0 0 -19.11zm0 -7.44l6.11 0 0 5 -6.11 0 0 -5zm31.19 14.92l0 11.63 -6.15 0 0 -1.89 0 -7.01c0,-1.65 -0.03,-2.78 -0.11,-3.41 -0.07,-0.63 -0.2,-1.09 -0.38,-1.38 -0.24,-0.4 -0.56,-0.71 -0.97,-0.93 -0.41,-0.22 -0.88,-0.33 -1.4,-0.33 -1.27,0 -2.27,0.49 -3,1.47 -0.73,0.99 -1.09,2.35 -1.09,4.09l0 9.39 -6.11 0 0 -19.11 6.11 0 0 2.8c0.92,-1.12 1.9,-1.94 2.93,-2.46 1.04,-0.53 2.18,-0.79 3.44,-0.79 2.2,0 3.87,0.67 5.02,2.03 1.14,1.35 1.71,3.32 1.71,5.9zm18.65 8.38c-0.84,1.12 -1.77,1.94 -2.77,2.47 -1.02,0.52 -2.19,0.78 -3.52,0.78 -2.33,0 -4.26,-0.92 -5.78,-2.75 -1.52,-1.84 -2.29,-4.18 -2.29,-7.02 0,-2.86 0.77,-5.19 2.29,-7.02 1.52,-1.82 3.45,-2.74 5.78,-2.74 1.33,0 2.5,0.26 3.52,0.78 1,0.53 1.93,1.35 2.77,2.47l0 -2.83 6.15 0 0 17.18c0,3.07 -0.96,5.42 -2.9,7.04 -1.94,1.63 -4.76,2.44 -8.44,2.44 -1.19,0 -2.35,-0.09 -3.47,-0.28 -1.11,-0.18 -2.23,-0.46 -3.36,-0.84l0 -4.75c1.07,0.61 2.12,1.06 3.14,1.37 1.02,0.29 2.05,0.45 3.09,0.45 2,0 3.46,-0.44 4.4,-1.32 0.93,-0.87 1.39,-2.25 1.39,-4.11l0 -1.32zm-4.02 -11.88c-1.26,0 -2.25,0.47 -2.95,1.4 -0.71,0.93 -1.06,2.25 -1.06,3.96 0,1.75 0.34,3.08 1.02,3.98 0.68,0.9 1.68,1.36 2.99,1.36 1.27,0 2.26,-0.47 2.96,-1.4 0.71,-0.93 1.06,-2.25 1.06,-3.94 0,-1.71 -0.35,-3.03 -1.06,-3.96 -0.7,-0.93 -1.69,-1.4 -2.96,-1.4zm25.19 6.54l-6.15 0 0 -0.84c0,-0.93 0.19,-1.76 0.57,-2.48 0.37,-0.73 1.16,-1.64 2.37,-2.76l1.09 -0.99c0.65,-0.6 1.12,-1.15 1.42,-1.67 0.3,-0.53 0.46,-1.05 0.46,-1.58 0,-0.79 -0.28,-1.42 -0.83,-1.86 -0.54,-0.45 -1.3,-0.68 -2.28,-0.68 -0.92,0 -1.91,0.19 -2.99,0.57 -1.06,0.39 -2.18,0.95 -3.34,1.7l0 -5.35c1.38,-0.47 2.63,-0.82 3.77,-1.05 1.13,-0.23 2.24,-0.34 3.29,-0.34 2.77,0 4.89,0.56 6.34,1.69 1.46,1.14 2.18,2.79 2.18,4.96 0,1.11 -0.22,2.11 -0.66,2.99 -0.44,0.88 -1.2,1.82 -2.27,2.84l-1.1 0.97c-0.76,0.71 -1.27,1.27 -1.51,1.7 -0.24,0.42 -0.36,0.9 -0.36,1.41l0 0.77zm-6.15 2.51l6.15 0 0 6.08 -6.15 0 0 -6.08z"));

    ctx.restore();
    draw.t++;  
    window.requestAnimationFrame(draw);
}

window.requestAnimationFrame(draw);
<canvas id="canvas"></canvas>

然而，文本就是文本，而作为文本的曲线又是另外一回事。文本可以很容易地编辑。

stackoverflow.com上的修改问题：JS Canvas：为什么文本渲染不流畅？

javascript
Martin Hope
Leonid
Asked: 2022-06-21 19:55:06 +0000 UTC
  • 2

在 SO 上的一个答案中注意到页面上HTML放置了多个标签（文件？）SVG。在第一个标签中设置了路径模板的<symbol></symbol>定义，在其他三个标签中读取了这个定义。此外，该声明xmlns也仅出现在第一种情况下。我尝试替换<symbol>为<g>- 一切仍然有效。

因此，问题：

1、如何SVG在模板或组定义的范围上考虑多个标签？是否可以在文档中的任何 SVG 标签（文件）中定义模板？

2. 为什么其他标签中省略了xmlns打开文件所需的属性，这是什么规则？SVG

3. 是否可以在 中包含SVG所有定义的文件，并在中head使用这些定义。bodySVG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" viewBox="0 0 9.8 14.8" >
<g id="marker" >
    <path   d="M9.831 4.916c0 2.714-3.538 8.487-4.913 9.867C3.437 13.307 0 7.631 0 4.916S2.201 0 4.916 0s4.915 2.201 4.915 4.916z"/>
    <circle cx="4.912" cy="4.916" r="2.932"  fill="#E7EDEF"/>
</g>
</svg>

<svg width="19.6" height="29.6" viewBox="0 0 9.8 14.8"> 
<use class="u1" href="#marker"  />
</svg>

<svg width="19.6" height="29.6" viewBox="0 0 9.8 14.8"> 
<use class="u2" href="#marker"  />
</svg>  

<svg width="19.6" height="29.6" viewBox="0 0 9.8 14.8"> 
<use class="u3" href="#marker"  />
</svg>

取自问题页面的代码：Fill property not working for svg sprite

html
Martin Hope
Leonid
Asked: 2020-03-25 21:08:15 +0000 UTC
  • 3

还没能安装开发工具Electron.js。她值得吗？大多是一些广告文字，没有本质。

  1. 是否可以在 Electron 上创建成熟的应用程序？像 CorelDraw、SolidWorks，至少是 BasisMebelschik 或 bCAD？应用程序是否有权访问系统？到视频卡？还是放纵自己，学习С++更好Qt？（可能不同）
  2. 什么将是移动应用程序？它将是本机应用程序还是 Web 应用程序？它们会在 Google 商店上架吗？或者没有JAVA(Android Studio) 和Objective-C|| Swift(Xcode) 不可或缺？

我理解这个问题不能被认为是明确的，请您根据个人使用和您所掌握的信息做出判断，不要在代码中发现错误。没有单一的答案，但普遍的问题是：

如果有机会探索任何其他用于创建桌面和移动应用程序的技术，Electron.js 值得一试吗？

javascript