标签: svg

嗨，我有下一个 svg 字符串 str=

<svg width="612" height="394" xmlns="http://www.w3.org/2000/svg">
 <g>
     <title>Layer 1</title>
     <rect id="svg_1" height="152" width="265" y="44" x="91" stroke-width="5" stroke="#000000" fill="#FF0000"/>
 </g>
 <g>
     <title>Layer 2</title>
     <rect id="svg_2" height="125" width="151" y="157" x="399" stroke-width="5" stroke="#000000" fill="#FF0000"/>
 </g>
</svg>

为了获得第一个矩形的宽度和高度，我可以使用 javascript+jquery：

alert("width:"+$(str).find('g:eq(0) rect:eq(0)').attr('width'));
alert("height:"+$(str).find('g:eq(0) rect:eq(0)').attr('height'));

我想找到相同的使用 .getBoundingClientRect() 或 .getBBox() 我试过：

alert("height"+$(str).find('g:eq(0) rect:eq(0)').getBoundingClientRect().width);
alert("height"+$(str).find('g:eq(0) rect:eq(0)').getBBox().width);

但它不起作用。有谁知道解决方案？我该如何使用 getBoundingClientRect 和 getBBox 以及我的字符串 str？谢谢

以最简单的形式，我想制作一个像这个网站一样的加载页面。

我想使用自定义 SVG 徽标（我在 illustrator 中制作的）并在页面加载时水平填充徽标。

就像 SVG 剪辑蒙版进度条（或其他东西）。

拜托，请帮帮我！

谢谢，乔恩

我有一个SVG，我正在使用下面的JavaScript代码转换为PNG

$(".exportImageButton").on("click",function(){
  var svg = document.querySelector( "svg" );
  var svgData = new XMLSerializer().serializeToString( svg );
  var canvas = document.createElement( "canvas" );
  var svgSize = svg.getBoundingClientRect();
  canvas.width = svgSize.width * 3;
  canvas.height = svgSize.height * 3;
  canvas.style.width = svgSize.width;
  canvas.style.height = svgSize.height;
  var ctx = canvas.getContext( "2d" );
  ctx.scale(3,3);

  var img = document.createElement( "img" );
  img.setAttribute( "src", "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(svgData))) );

  img.onload = function() {
      ctx.drawImage( img, 0, 0 );
      var canvasdata = canvas.toDataURL("image/png",1);

      var pngimg = '<img src="'+canvasdata+'">';
      d3.select("#pngdataurl").html(pngimg);

      var …

我想在页面中间创建一个像这样的信号脉冲 SVG 动画。

是否有任何动画创建程序可以使用 SVG 输出生成类似的内容？

我有一个使用 Inkscape 转换为 XAML 的 svg 文件，但出了点问题。这是我的期望：

这就是我得到的：

有任何想法吗？

SVG文件：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1920" height="1080">
<rect x="51" y="37" width="198" height="99" id="rect1" style="fill-opacity:0;stroke-width:1;stroke:rgb(0,0,0);fill:rgb(255,255,255)"  />
<rect x="111" y="178" width="216" height="125" id="rect2" style="fill-opacity:0;stroke-width:1;stroke:rgb(0,0,0);fill:rgb(255,255,255)"  />
<rect x="302" y="42" width="181" height="113" id="rect3" style="fill-opacity:0;stroke-width:1;stroke:rgb(0,0,0);fill:rgb(255,255,255)"  />
<rect x="391" y="234" width="94" height="84" id="rect4" style="fill-opacity:0;stroke-width:1;stroke:rgb(0,0,0);fill:rgb(255,255,255)" transform="matrix(0.7071068,0.7071068,-0.7071068,0.7071068,323.4487,-228.8742)" />
</svg>

XAML 生成的文件：

<?xml version="1.0" encoding="UTF-8"?>
<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Stretch="Uniform">
  <Canvas Name="svg6" Width="1920" Height="1080">
    <Canvas.Resources/>
    <Rectangle xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Canvas.Left="51" Canvas.Top="37" Width="198" Height="99" Name="rect1" Fill="#00FFFFFF" StrokeThickness="1" Stroke="#000000"/>
    <Rectangle xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Canvas.Left="111" Canvas.Top="178" Width="216" Height="125" Name="rect2" …

我需要将其实现为圆环图 - 我四处寻找 css/svg/canvas 解决方案，但找不到任何可靠的方法。

我知道我可以让每个部分都有完全圆角，但这不是我想要的。

我想制作一个六边形,有一个旋转的渐变边框.

示例GIF:

我尝试仅使用CSS制作形状,但这不起作用,因为:after和:before标签使用边框样式来创建形状,这是一个no.

我尝试使用.svg文件并将其加载为背景图像,但无法更改边框并添加css动画以旋转边框

最后我试图插入GIF,但它有问题,如形状周围的白色光环.我的背景是黑暗的,所以非常明显.

那么用指定动画插入这种形状的最佳方法是什么？

PS Inline svg不是一个选项,因为我想简单地插入形状,如:

<div id='hex'></div>

谢谢你的帮助.

如何使用CSS和图像创建一个带有切口的圆圈？我想要的一个例子如下所示.需要一个crossbrowser解决方案,并且css不是html.

我有一个 SVG：

<svg height="781.8" width="1077.15" xmlns="http://www.w3.org/2000/svg">
    <radialGradient cx="0" cy="0" gradientTransform="matrix(-0.0664, 0.0141, 0.0063, 0.0288, 137.9, -123.45)" gradientUnits="userSpaceOnUse" id="gradient0" r="819.2" spreadMethod="pad">
      <stop offset="0.0" stop-color="#ff0000" stop-opacity="0.34901962"/>
      <stop offset="1.0" stop-color="#ff0000" stop-opacity="0.0"/>
    </radialGradient>
    <g transform="translate(309.85, 414.55) rotate(0, 600, 300)">
       <path transform="translate(-125, -10)" d="M161.0 -139.65 L160.25 -139.45 160.8 -139.85 Q161.55 -140.4 163.6 -140.15 L161.0 -139.65 M92.55 -115.35 Q91.1 -122.1 97.5 -128.9 107.45 -139.25 134.7 -146.75 L142.55 -148.35 Q147.4 -149.25 152.3 -148.3 L160.45 -147.3 161.4 -147.25 159.25 -145.4 Q152.35 -139.0 152.35 -135.5 L152.4 -134.75 152.4 -134.6 151.85 …

如何使用CSS实现这种形状:

理想情况下,我也喜欢背景阴影效果.

https://i.imgur.com/D69glPV.png-我正在尝试使用CSS / HTML创建此设计。我最初的想法是创建一个白色的“ wave”容器，将带有SVG形状的图标包装起来，但是我想知道您是否真的可以仅使用CSS做到这一点？你们将如何处理呢？:)