标签: svg

我正在尝试在此登录页面中添加 SVG 作为背景图像（代码和预览如下）。但我不知道该怎么做，我只知道<img src="background.svg" class="yourCSSClass"> 但这会在我的文本上方添加 SVG，而我希望它在我的文本后面。我怎么做？我在这里发送我的反应代码和 SVG 文件

这是 App.js`

import React, { Component } from 'react';
    import './App.css';
    import NameForm from './Form';

    class App extends Component {
      render() {
        return (
          <div className="App">
            <div className="Heading">
    <h1>Welcome to the Sudistic</h1>
    <h3>A small to contribution to the programming community.</h3>
            </div>
            <div>
              <h4>Log In to your Account</h4>
            </div>
            <div>
              <NameForm />
            </div>

          </div>

        );
      }
    }

    export default App;

这是App.css

    .App {
  text-align: center;
  margin-top: 170px;
}

 h1 {
  color: …

这是一个简单的 SVG 蒙版（fiddle）：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-100 -400 600 600">

  <!-- Here I define the mask, a white rectangle with a strip removed -->
  <defs>
    <mask id="mymask">
      <rect x="100" y="-200" width="200" height="100" fill="white"/>
      <path d="M 250 -150  L 150 -150" stroke="black" fill="none" stroke-opacity="1" fill-opacity="1" stroke-width="25"/>
    </mask>
  </defs>

  <!-- This masked blue rectangle is displayed correctly, and lets us see where the mask is -->
  <rect x="-100" y="-300" width="500" height="500" fill="blue" fill-opacity="0.2" mask="url(#mymask)"/>

  <!-- This green vertical line is …

如何使用 typescript 解析 svg 元素的转换属性？

也就是说，如何解析 svg.g.transform 中字符串中的所有数字和操作，如下所示：

<svg viewBox="-40 0 150 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g fill="grey"
     transform="rotate(-10 50 100)
                translate(-36 45.5)
                skewX(40)
                scale(1 0.5)">
    <path id="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" />
  </g>

  <use xlink:href="#heart" fill="none" stroke="red"/>
</svg>

给定两个简单的 SVG 图标，我如何为它们之间的过渡设置动画 - 理想情况下没有复杂的 JavaScript（例如 GreenSock；不过切换一个类就可以了）：

svg {
    width: 10em;
    border: 1px solid #AAA;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: square;
    stroke-linejoin: bevel;
    fill: none;
}

<svg viewBox="0 0 24 24">
    <line x1="3" y1="6" x2="21" y2="6" />
    <line x1="3" y1="18" x2="21" y2="18" />
</svg>

<svg viewBox="0 0 24 24">
    <line x1="9" y1="6" x2="15" y2="12" />
    <line x1="9" y1="18" x2="15" y2="12" />
</svg>

（我假设两个图标<line>都会出于<svg>动画目的而合并为一个图标。）

根据我自己的研究，在网络上浏览了很多看似相互冲突的文档，CSS转换在这里是不够的（translate++导致图像倾斜）并且不再推荐SMIL（我也很难弄清楚如何使其工作）适当地）。scalerotate

在这个jsFiddle中，我有一个 SVG 矩形，其大小通过interact.js. 这工作正常，但是我需要n/ne/e/se/s/sw/w/nw在每个点添加调整大小手柄，8x8 像素方块。这些手柄应用于调整矩形的大小（而不是拖动矩形的边）。

我找到了 HTML 中的示例，而不是 SVG 中的示例，例如此处，但我不知道如何在 SVG 而不是 HTML 中使其工作。任何帮助将不胜感激。

var svg = document.getElementById('mysvg');
var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
svg.appendChild(rect);
rect.setAttribute('x', 100);
rect.setAttribute('y', 100);
rect.setAttribute('width', 100);
rect.setAttribute('height', 100);
rect.setAttribute('class', 'resize-me');
rect.setAttribute('stroke-width', 2);
rect.setAttribute('stroke', 'white');
rect.setAttribute('fill', 'grey')


interact('.resize-me')
    .resizable({
        edges: { left: true, right: true, bottom: true, top: true }
    })
    .on('resizemove', function(event) {
        var target = event.target;
        var x = (parseFloat(target.getAttribute('endx')) || 0)
        var y = (parseFloat(target.getAttribute('endy')) || …

我试图在一个弹性项目中调整具有特定宽高比的 svg viewBox 的大小，该项目占据了其父项的“剩余部分”。

目的是让 SVG 始终具有正确的宽高比，并在页面大小发生变化时沿侧面留有空间以保持比例不变。这在 Chrome 中工作得很好，但在 Firefox 和 Edge 中，svg 似乎会调整大小以适应其容器的最大宽度，并通过调整其高度和容器的高度来保持纵横比。我需要它根据容器大小调整自身大小，并且永远不会“溢出”容器。

有谁知道我可以做些什么来使它在所有三种浏览器中工作？这是代码：

.parent {
  background: green;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.header-child {
  height: 200px;
  width: 100%;
  flex-shrink: 0;
  background: black;
}

.svg-child {
  display: inline-block;
  flex: 1;
  width: 100%;
}

<div class="parent">
  <div class="header-child"></div>
  <div class="svg-child">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 200" preserveAspectRatio="xMidYMin meet" height="100%" width="100%">
        				<rect width="100%" height="100%" fill="red" />
        				<rect x="0" y="0" width="10" height="10" fill="blue" />
        				<rect x="90" y="190" width="10" …

我有下面给出的图标为 SVG 字符串的项目列表

steps=[
        {
            "id": 1,
            "code": "ABC",
            "dname": "abc",
            "conveyStep": null,
            "sequence": 1,
            "fqcn": null,
            "status": "A",
            "icon": `<svg xmlns="http://www.w3.org/2000/svg" width="24.148" height="31.393" viewBox="0 0 24.148 31.393">
    <defs>
    </defs>
    <g id="noun_Document_188541" transform="translate(-15 -5)">
        <g id="Group_1821" data-name="Group 1821" transform="translate(15 5)">
            <path id="Path_1051" d="M31.55 5H15v31.393h24.148V12.6zm.35 2.061l5.183 5.183H31.9V7.061zM16.2 35.185V6.208h14.5v7.244h7.244v21.733H16.208z" class="cls-1" data-name="Path 1051" transform="translate(-15 -5)"/>
            <path id="Rectangle_8" d="M0 0h14.489v.604H0z" class="cls-1" data-name="Rectangle 8" transform="translate(4.83 25.355)"/>
            <path id="Rectangle_9" d="M0 0h6.037v.604H0z" class="cls-1" data-name="Rectangle 9" transform="translate(4.83 18.111)"/>
            <path id="Rectangle_10" d="M0 0h14.489v.604H0z" class="cls-1" data-name="Rectangle 10" transform="translate(4.83 15.696)"/>
            <path …

这是字母 B，这是路径代码

<path
  d="M45.691667,45.15 C48.591667,46.1 50.691667,48.95 50.691667,52.2 C50.691667,57.95 46.691667,61 40.291667,61 L28.541667,61 L28.541667,30.3 L39.291667,30.3 C45.691667,30.3 49.691667,33.15 49.691667,38.65 C49.691667,41.95 47.941667,44.35 45.691667,45.15 Z M33.591667,43.2 L39.241667,43.2 C42.791667,43.2 44.691667,41.85 44.691667,38.95 C44.691667,36.05 42.791667,34.8 39.241667,34.8 L33.591667,34.8 L33.591667,43.2 Z M33.591667,47.5 L33.591667,56.5 L40.191667,56.5 C43.691667,56.5 45.591667,54.75 45.591667,52 C45.591667,49.2 43.691667,47.5 40.191667,47.5 L33.591667,47.5 Z" />

如何将字母 B 更改为字母 N ？

是否有安全原因阻止<use>元素在数据 URI 图像中工作？我尝试过这样的事情：

const svg = document.querySelector("svg");
const img = document.querySelector("img");
img.src = "data:image/svg+xml;charset=UTF-8," + encodeURI(svg.outerHTML);

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect id="foo" width="100" height="100"/>
  <use xlink:href="#foo" x="10" y="10"/>
</svg>
<img src=""/>

如果我直接访问数据 URI，Chrome 和 Firefox 都会给出如下错误消息：

<use>数据 URI 中包含元素的损坏图像示例：

<img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20xmlns:xlink=%22http://www.w3.org/1999/xlink%22%20width=%22110%22%20height=%22110%22%3E%0A%20%20%3Crect%20id=%22foo%22%20width=%22100%22%20height=%22100%22/%3E%0A%20%20%3Cuse%20xlink:href=%22#foo%22%20x=%2210%22%20y=%2210%22/%3E%0A%3C/svg%3E%0A"/>

我有一个 SVG 文件，其中的点呈直线。我想要实现的是，当用户将鼠标悬停在 svg 文件上时，点会变成像所附图像一样的微笑。

过渡必须平稳。

这里最好的方法是什么？我可以只使用 css 来完成还是也应该使用 js ？

谢谢