Safari 不尊重 `transform-origin` SVG 属性

2024-01-06

我正在尝试使用构建 SVGtransform属性。但是，虽然我的 SVG 在 Chrome 和 Firefox 中看起来符合预期，但在 Safari 中看起来却损坏了。看来 Safari 不尊重transform-origin属性并始终应用transform like transform-origin has "0 0" value.

我需要制作动画transform属性，我需要生成的 SVG 在所有浏览器中看起来都相同。我尝试通过提供不同的值来解决这个问题transform-boxCSS 属性，但没有成功。

该问题有解决方法吗？

下面是说明该问题的示例。所有图像应该看起来相同。它们在 Chrome 和 Firefox 中看起来相同，但在 Safari 中则不同。

h1 {
  font-family: sans-serif;
}

figure {
  border: thin #c0c0c0 solid;
  display: inline-flex;
  flex-flow: column;
  padding: 5px;
  max-width: 200px;
  margin: auto;
}

figcaption {
  margin-top: 5px;
  background-color: #222;
  color: #fff;
  font: smaller sans-serif;
  padding: 3px;
  text-align: center;
}

<h1>1. Reference image</h1>

<figure>
  <svg width="200" height="200" viewBox="0 0 200 200">
    <circle cx="100" cy="100" r="100" stroke="none" fill="black"/>
    <line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
    <line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
    
    <circle cx="100" cy="100" r="75" stroke="none" fill="blue"/>
    <line x1="100" y1="25" x2="100" y2="175" stroke="rebeccapurple" stroke-width="1.5"/>
    <line x1="25" y1="100" x2="175" y2="100" stroke="rebeccapurple" stroke-width="1.5"/>
    
    <circle cx="100" cy="100" r="50" stroke="none" fill="red"/>
    <line x1="100" y1="50" x2="100" y2="150" stroke="rebeccapurple" stroke-width="1"/>
    <line x1="50" y1="100" x2="150" y2="100" stroke="rebeccapurple" stroke-width="1"/>
  
    <circle cx="100" cy="100" r="25" stroke="none" fill="yellow"/>
    <line x1="100" y1="75" x2="100" y2="125" stroke="rebeccapurple" stroke-width="0.5"/>
    <line x1="75" y1="100" x2="125" y2="100" stroke="rebeccapurple" stroke-width="0.5"/>
  </svg>
  <figcaption>Figure 1. Reference image, <code>transform</code> is not used. All other images should look the same.</figcaption>
</figure>

<h1>2. <code>transform</code> applied to <code>&lt;g&gt;</code> element</h1>

<figure>
  <svg width="200" height="200" viewBox="0 0 200 200">
    <defs>
      <g id="target-g-1">
        <circle cx="100" cy="100" r="100" stroke="none"/>
        <line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
        <line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
      </g>
    </defs>
    
    <use href="#target-g-1" fill="black"/>
    <use href="#target-g-1" fill="blue" transform="scale(0.75 0.75)" transform-origin="100 100"/>
    
    <svg x="0" y="0" width="200" height="200" viewBox="0 0 200 200">
      <use href="#target-g-1" fill="red" transform="scale(0.5 0.5)" transform-origin="100 100"/>
      <use href="#target-g-1" fill="yellow" transform="scale(0.25 0.25)" transform-origin="100 100"/>
    </svg>
  </svg>

  <figcaption>Figure 2-1. Nested <code>&lt;svg&gt;</code> has the same size as the outermost <code>&lt;svg&gt;</code>.</figcaption>
</figure>

<figure>
  <svg width="200" height="200" viewBox="0 0 200 200">
    <defs>
      <g id="target-g-2">
        <circle cx="100" cy="100" r="100" stroke="none"/>
        <line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
        <line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
      </g>
    </defs>
    
    <use href="#target-g-2" fill="black"/>
    <use href="#target-g-2" fill="blue" transform="scale(0.75 0.75)" transform-origin="100 100"/>
    
    <svg x="0" y="50" width="200" height="100" viewBox="0 0 200 100">
      <use href="#target-g-2" fill="red" transform="scale(0.5 0.5)" transform-origin="100 0"/>
      <use href="#target-g-2" fill="yellow" transform="scale(0.25 0.25)" transform-origin="100 33.3333"/>
    </svg>
  </svg>
  <figcaption>Figure 2-2. Nested <code>&lt;svg&gt;</code> is centered in the outermost <code>&lt;svg&gt;</code> along single axis.</figcaption>
</figure>

<figure>
  <svg width="200" height="200" viewBox="0 0 200 200">
    <defs>
      <g id="target-g-3">
        <circle cx="100" cy="100" r="100" stroke="none"/>
        <line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
        <line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
      </g>
    </defs>
    
    <use href="#target-g-3" fill="black"/>
    <use href="#target-g-3" fill="blue" transform="scale(0.75 0.75)" transform-origin="100 100"/>
    
    <svg x="50" y="50" width="100" height="100" viewBox="0 0 100 100">
      <use href="#target-g-3" fill="red" transform="scale(0.5 0.5)" transform-origin="0 0"/>
      <use href="#target-g-3" fill="yellow" transform="scale(0.25 0.25)" transform-origin="33.3333 33.3333"/>
    </svg>
  </svg>
  <figcaption>Figure 2-3. Nested <code>&lt;svg&gt;</code> is centered in the outermost <code>&lt;svg&gt;</code> along both axes.</figcaption>
</figure>

<h1>3. <code>transform</code> applied to <code>&lt;svg&gt;</code> element</h1>

<figure>
  <svg width="200" height="200" viewBox="0 0 200 200">
    <defs>
      <svg id="target-svg-1" width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="none">
        <circle cx="100" cy="100" r="100" stroke="none"/>
        <line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
        <line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
      </svg>
    </defs>
    
    <use href="#target-svg-1" fill="black"/>
    <use href="#target-svg-1" fill="blue" transform="scale(0.75 0.75)" transform-origin="100 100"/>
    
    <svg x="0" y="0" width="200" height="200" viewBox="0 0 200 200">
      <use href="#target-svg-1" x="0" y="0" fill="red" transform="scale(0.5 0.5)" transform-origin="100 100"/>
      <use href="#target-svg-1" x="0" y="0" fill="yellow" transform="scale(0.25 0.25)" transform-origin="100 100"/>
    </svg>
  </svg>
  <figcaption>Figure 3-1. Nested <code>&lt;svg&gt;</code> has the same size as the outermost <code>&lt;svg&gt;</code>.</figcaption>
</figure>

<figure>
  <svg width="200" height="200" viewBox="0 0 200 200">
    <defs>
      <svg id="target-svg-2a" width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="none">
        <circle cx="100" cy="100" r="100" stroke="none"/>
        <line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
        <line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
      </svg>
    </defs>
    
    <use href="#target-svg-2a" x="0" y="0" fill="black"/>
    <use href="#target-svg-2a" x="0" y="0" fill="blue" transform="scale(0.75 0.75)" transform-origin="100 100"/>
    
    <svg x="0" y="50" width="200" height="100" viewBox="0 0 200 100">
      <use href="#target-svg-2a" x="0" y="-50" fill="red" transform="scale(0.5 0.5)" transform-origin="100 50"/>
      <use href="#target-svg-2a" x="0" y="-50" fill="yellow" transform="scale(0.25 0.25)" transform-origin="100 50"/>
    </svg>
  </svg>
  <figcaption>
    Figure 3-2a. Nested <code>&lt;svg&gt;</code> is centered in the outermost <code>&lt;svg&gt;</code> along single axis.
    Transformed <code>&lt;svg&gt;</code> is shifted.
  </figcaption>
</figure>

<figure>
  <svg width="200" height="200" viewBox="0 0 200 200">
    <defs>
      <svg id="target-svg-2b" width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="none">
        <circle cx="100" cy="100" r="100" stroke="none"/>
        <line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
        <line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
      </svg>
    </defs>
    
    <use href="#target-svg-2b" x="0" y="0" fill="black"/>
    <use href="#target-svg-2b" x="0" y="0" fill="blue" transform="scale(0.75 0.75)" transform-origin="100 100"/>
    
    <svg x="0" y="50" width="200" height="100" viewBox="0 0 200 100">
      <use href="#target-svg-2b" x="0" y="0" fill="red" transform="scale(0.5 0.5)" transform-origin="100 0"/>
      <use href="#target-svg-2b" x="0" y="0" fill="yellow" transform="scale(0.25 0.25)" transform-origin="100 33.333333"/>
    </svg>
  </svg>
  <figcaption>
    Figure 3-2b. Nested <code>&lt;svg&gt;</code> is centered in the outermost <code>&lt;svg&gt;</code> along single axis.
    <code>transform-origin</code> is shifted.
  </figcaption>
</figure>

<figure>
  <svg width="200" height="200" viewBox="0 0 200 200">
    <defs>
      <svg id="target-svg-3a" width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="none">
        <circle cx="100" cy="100" r="100" stroke="none"/>
        <line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
        <line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
      </svg>
    </defs>
    
    <use href="#target-svg-3a" fill="black"/>
    <use href="#target-svg-3a" fill="blue" transform="scale(0.75 0.75)" transform-origin="100 100"/>
    
    <svg x="50" y="50" width="100" height="100" viewBox="0 0 100 100">
      <use href="#target-svg-3a" x="-50" y="-50" fill="red" transform="scale(0.5 0.5)" transform-origin="50 50"/>
      <use href="#target-svg-3a" x="-50" y="-50" fill="yellow" transform="scale(0.25 0.25)" transform-origin="50 50"/>
    </svg>
  </svg>
  <figcaption>
    Figure 3-3a. Nested <code>&lt;svg&gt;</code> is centered in the outermost <code>&lt;svg&gt;</code> along both axes.
    Transformed <code>&lt;svg&gt;</code> is shifted.
  </figcaption>
</figure>

<figure>
  <svg width="200" height="200" viewBox="0 0 200 200">
    <defs>
      <svg id="target-svg-3b" width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="none">
        <circle cx="100" cy="100" r="100" stroke="none"/>
        <line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
        <line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
      </svg>
    </defs>
    
    <use href="#target-svg-3b" fill="black"/>
    <use href="#target-svg-3b" fill="blue" transform="scale(0.75 0.75)" transform-origin="100 100"/>
    
    <svg x="50" y="50" width="100" height="100" viewBox="0 0 100 100">
      <use href="#target-svg-3b" x="0" y="0" fill="red" transform="scale(0.5 0.5)" transform-origin="0 0"/>
      <use href="#target-svg-3b" x="0" y="0" fill="yellow" transform="scale(0.25 0.25)" transform-origin="33.333333 33.333333"/>
    </svg>
  </svg>
  <figcaption>
    Figure 3-3b. Nested <code>&lt;svg&gt;</code> is centered in the outermost <code>&lt;svg&gt;</code> along both axes.
    <code>transform-origin</code> is shifted.
  </figcaption>
</figure>

Safari 实现了很少的 SVG 2 - 因此安全的方法是仅使用 SVG 1.1 功能进行跨浏览器（SVG 1.1 中没有转换源）。

在 SVG 1.1 中执行此操作的跨浏览器方式。就是变换/平移到原点，进行缩放，然后反向平移。就像是：

transform="translate(100 200) scale(0.5 0.5) translate(-100 -200)"

使用这种技术，问题的片段将转换为：

h1 {
  font-family: sans-serif;
}

figure {
  border: thin #c0c0c0 solid;
  display: inline-flex;
  flex-flow: column;
  padding: 5px;
  max-width: 200px;
  margin: auto;
}

figcaption {
  margin-top: 5px;
  background-color: #222;
  color: #fff;
  font: smaller sans-serif;
  padding: 3px;
  text-align: center;
}

<h1>1. Reference image</h1>

<figure>
  <svg width="200" height="200" viewBox="0 0 200 200">
    <circle cx="100" cy="100" r="100" stroke="none" fill="black"/>
    <line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
    <line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
    
    <circle cx="100" cy="100" r="75" stroke="none" fill="blue"/>
    <line x1="100" y1="25" x2="100" y2="175" stroke="rebeccapurple" stroke-width="1.5"/>
    <line x1="25" y1="100" x2="175" y2="100" stroke="rebeccapurple" stroke-width="1.5"/>
    
    <circle cx="100" cy="100" r="50" stroke="none" fill="red"/>
    <line x1="100" y1="50" x2="100" y2="150" stroke="rebeccapurple" stroke-width="1"/>
    <line x1="50" y1="100" x2="150" y2="100" stroke="rebeccapurple" stroke-width="1"/>
  
    <circle cx="100" cy="100" r="25" stroke="none" fill="yellow"/>
    <line x1="100" y1="75" x2="100" y2="125" stroke="rebeccapurple" stroke-width="0.5"/>
    <line x1="75" y1="100" x2="125" y2="100" stroke="rebeccapurple" stroke-width="0.5"/>
  </svg>
  <figcaption>Figure 1. Reference image, <code>transform</code> is not used. All other images should look the same.</figcaption>
</figure>

<h1>2. <code>transform</code> applied to <code>&lt;g&gt;</code> element</h1>

<figure>
  <svg width="200" height="200" viewBox="0 0 200 200">
    <defs>
      <g id="target-g-1">
        <circle cx="100" cy="100" r="100" stroke="none"/>
        <line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
        <line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
      </g>
    </defs>
    
    <use href="#target-g-1" fill="black"/>
    <use href="#target-g-1" fill="blue" transform="translate(100 100) scale(0.75 0.75) translate(-100 -100)"/>
    
    <svg x="0" y="0" width="200" height="200" viewBox="0 0 200 200">
      <use href="#target-g-1" fill="red" transform="translate(100 100) scale(0.5 0.5) translate(-100 -100)"/>
      <use href="#target-g-1" fill="yellow" transform="translate(100 100) scale(0.25 0.25) translate(-100 -100)"/>
    </svg>
  </svg>

  <figcaption>Figure 2-1. Nested <code>&lt;svg&gt;</code> has the same size as the outermost <code>&lt;svg&gt;</code>.</figcaption>
</figure>

<figure>
  <svg width="200" height="200" viewBox="0 0 200 200">
    <defs>
      <g id="target-g-2">
        <circle cx="100" cy="100" r="100" stroke="none"/>
        <line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
        <line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
      </g>
    </defs>
    
    <use href="#target-g-2" fill="black"/>
    <use href="#target-g-2" fill="blue" transform="translate(100 100) scale(0.75 0.75) translate(-100 -100)"/>
    
    <svg x="0" y="50" width="200" height="100" viewBox="0 0 200 100">
      <use href="#target-g-2" fill="red" transform="translate(100 0) scale(0.5 0.5) translate(-100 -0)"/>
      <use href="#target-g-2" fill="yellow" transform="translate(100 33.3333) scale(0.25 0.25) translate(-100 -33.3333)"/>
    </svg>
  </svg>
  <figcaption>Figure 2-2. Nested <code>&lt;svg&gt;</code> is centered in the outermost <code>&lt;svg&gt;</code> along single axis.</figcaption>
</figure>

<figure>
  <svg width="200" height="200" viewBox="0 0 200 200">
    <defs>
      <g id="target-g-3">
        <circle cx="100" cy="100" r="100" stroke="none"/>
        <line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
        <line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
      </g>
    </defs>
    
    <use href="#target-g-3" fill="black"/>
    <use href="#target-g-3" fill="blue" transform="translate(100 100) scale(0.75 0.75) translate(-100 -100)"/>
    
    <svg x="50" y="50" width="100" height="100" viewBox="0 0 100 100">
      <use href="#target-g-3" fill="red" transform="translate(0 0) scale(0.5 0.5) translate(-0 -0)"/>
      <use href="#target-g-3" fill="yellow" transform="translate(33.3333 33.3333) scale(0.25 0.25) translate(-33.3333 -33.3333)"/>
    </svg>
  </svg>
  <figcaption>Figure 2-3. Nested <code>&lt;svg&gt;</code> is centered in the outermost <code>&lt;svg&gt;</code> along both axes.</figcaption>
</figure>

<h1>3. <code>transform</code> applied to <code>&lt;svg&gt;</code> element</h1>

<figure>
  <svg width="200" height="200" viewBox="0 0 200 200">
    <defs>
      <svg id="target-svg-1" width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="none">
        <circle cx="100" cy="100" r="100" stroke="none"/>
        <line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
        <line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
      </svg>
    </defs>
    
    <use href="#target-svg-1" fill="black"/>
    <use href="#target-svg-1" fill="blue" transform="translate(100 100) scale(0.75 0.75) translate(-100 -100)"/>
    
    <svg x="0" y="0" width="200" height="200" viewBox="0 0 200 200">
      <use href="#target-svg-1" x="0" y="0" fill="red" transform="translate(100 100) scale(0.5 0.5) translate(-100 -100)"/>
      <use href="#target-svg-1" x="0" y="0" fill="yellow" transform="translate(100 100) scale(0.25 0.25) translate(-100 -100)"/>
    </svg>
  </svg>
  <figcaption>Figure 3-1. Nested <code>&lt;svg&gt;</code> has the same size as the outermost <code>&lt;svg&gt;</code>.</figcaption>
</figure>

<figure>
  <svg width="200" height="200" viewBox="0 0 200 200">
    <defs>
      <svg id="target-svg-2a" width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="none">
        <circle cx="100" cy="100" r="100" stroke="none"/>
        <line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
        <line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
      </svg>
    </defs>
    
    <use href="#target-svg-2a" x="0" y="0" fill="black"/>
    <use href="#target-svg-2a" x="0" y="0" fill="blue" transform="translate(100 100) scale(0.75 0.75) translate(-100 -100)"/>
    
    <svg x="0" y="50" width="200" height="100" viewBox="0 0 200 100">
      <use href="#target-svg-2a" x="0" y="-50" fill="red" transform="translate(100 50) scale(0.5 0.5) translate(-100 -50)"/>
      <use href="#target-svg-2a" x="0" y="-50" fill="yellow" transform="translate(100 50) scale(0.25 0.25) translate(-100 -50)"/>
    </svg>
  </svg>
  <figcaption>
    Figure 3-2a. Nested <code>&lt;svg&gt;</code> is centered in the outermost <code>&lt;svg&gt;</code> along single axis.
    Transformed <code>&lt;svg&gt;</code> is shifted.
  </figcaption>
</figure>

<figure>
  <svg width="200" height="200" viewBox="0 0 200 200">
    <defs>
      <svg id="target-svg-2b" width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="none">
        <circle cx="100" cy="100" r="100" stroke="none"/>
        <line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
        <line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
      </svg>
    </defs>
    
    <use href="#target-svg-2b" x="0" y="0" fill="black"/>
    <use href="#target-svg-2b" x="0" y="0" fill="blue" transform="translate(100 100) scale(0.75 0.75) translate(-100 -100)"/>
    
    <svg x="0" y="50" width="200" height="100" viewBox="0 0 200 100">
      <use href="#target-svg-2b" x="0" y="0" fill="red" transform="translate(100 0) scale(0.5 0.5) translate(-100 0)"/>
      <use href="#target-svg-2b" x="0" y="0" fill="yellow" transform="translate(100 33.33333) scale(0.25 0.25) translate(-100 -33.33333)"/>
    </svg>
  </svg>
  <figcaption>
    Figure 3-2b. Nested <code>&lt;svg&gt;</code> is centered in the outermost <code>&lt;svg&gt;</code> along single axis.
    <code>transform-origin</code> is shifted.
  </figcaption>
</figure>

<figure>
  <svg width="200" height="200" viewBox="0 0 200 200">
    <defs>
      <svg id="target-svg-3a" width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="none">
        <circle cx="100" cy="100" r="100" stroke="none"/>
        <line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
        <line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
      </svg>
    </defs>
    
    <use href="#target-svg-3a" fill="black"/>
    <use href="#target-svg-3a" fill="blue" transform="translate(100 100) scale(0.75 0.75) translate(-100 -100)"/>
    
    <svg x="50" y="50" width="100" height="100" viewBox="0 0 100 100">
      <use href="#target-svg-3a" x="-50" y="-50" fill="red" transform="translate(50 50) scale(0.5 0.5) translate(-50 -50)"/>
      <use href="#target-svg-3a" x="-50" y="-50" fill="yellow" transform="translate(50 50) scale(0.25 0.25) translate(-50 -50)"/>
    </svg>
  </svg>
  <figcaption>
    Figure 3-3a. Nested <code>&lt;svg&gt;</code> is centered in the outermost <code>&lt;svg&gt;</code> along both axes.
    Transformed <code>&lt;svg&gt;</code> is shifted.
  </figcaption>
</figure>

<figure>
  <svg width="200" height="200" viewBox="0 0 200 200">
    <defs>
      <svg id="target-svg-3b" width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="none">
        <circle cx="100" cy="100" r="100" stroke="none"/>
        <line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
        <line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
      </svg>
    </defs>
    
    <use href="#target-svg-3b" fill="black"/>
    <use href="#target-svg-3b" fill="blue" transform="translate(100 100) scale(0.75 0.75) translate(-100 -100)"/>
    
    <svg x="50" y="50" width="100" height="100" viewBox="0 0 100 100">
      <use href="#target-svg-3b" x="0" y="0" fill="red" transform="scale(0.5 0.5)"/>
      <use href="#target-svg-3b" x="0" y="0" fill="yellow" transform="translate(33.333333 33.333333) scale(0.25 0.25) translate(-33.333333 -33.333333)"/>
    </svg>
  </svg>
  <figcaption>
    Figure 3-3b. Nested <code>&lt;svg&gt;</code> is centered in the outermost <code>&lt;svg&gt;</code> along both axes.
    <code>transform-origin</code> is shifted.
  </figcaption>
</figure>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

SVG

safari

transform

Safari 不尊重 `transform-origin` SVG 属性的相关文章

元素和 svg 形状之间的白线

大家好我正在使用由 shapedivider 生成的 svg 整形器您可以看到有一条白线我不知道为什么它在那里以及如何删除它请你帮助我好吗有形状分隔符的代码 custom shape divider bottom 1640714
CSS使背景图像使用字体字符

我想使用字体字符例如来自 font awesome 作为输入元素的背景图像
无法通过 python3 启动 Selenium Safari WebDriver

我想使用 Safari 作为 python 的浏览器代码相当简单 from selenium import webdriver driver webdriver Safari url https www gmail com driver
有没有办法将 SWF 转换为 SVG 格式？

有没有办法将 FLA 或 SWF 转换为 SVG 格式它可以是一个软件吗或者甚至是网络转换器我尝试了一些方法但没有一个有效所有这些似乎都已经过时了不 SWF 支持的功能太多而 SVG 格式无法创建有效的 SWF 版本如果您只
双弧形

我目前正在尝试生成波浪形幽灵底部形状该形状包含两条双曲线虽然底部的部分这个图片 http images clipartpanda com ghost clip art castle ghost clipart1 jpg我认为以更好的
路口观察器 polyfill 无法在 Safari 中工作

我需要检测从另一个域加载的 iframe 是否在视口中这在 Chromem Firefox 和 IE 中运行良好称为 Intersection Observer 然而这在 Safari 中不起作用为此创建了一个polyfill Git
iPad Safari Web Inspector 在页面加载时崩溃

我有一个用 WordPress 制作的以视频为中心的网站当我们在 iPad 上测试网站时我们将其连接到 Mac 笔记本电脑并打开 safari 开发人员工具来检查是否有任何错误等我们的主页上一切正常但当我们转到我们添加的任何视频帖子
将 SVG 路径转换为绝对命令

给定一个 SVG Path 元素如何将所有路径命令转换为绝对坐标例如转换此路径
cookie神秘重现的原因是什么？

我正在开发一个使用 cookie 来存储会话信息的 Web 应用程序我已经手动删除了会话 cookie 因为我正在处理代码的另一部分我不需要登录会话然而在页面重新加载几次后会话 cookie 神秘地重新出现其中包括我之前出于测试
QML改变图像颜色

我搜索了如何对图像进行着色格式为 svg 或 png 我尝试用一个填充图像的矩形覆盖我的图像但由于我的图像不是矩形它会给整个矩形着色而不仅仅是图像可以用qml改变图像颜色吗或者是否可以使用 QPixmap 更改 qt 使用
Google Chrome 显示的页面与 Safari 一样吗？

鉴于 Chrome 和 Safari 使用 webkit 有没有人发现任何在 Chrome 上与 Safari 上呈现不同的东西目前是否有理由在这两个平台上测试网站或者现在测试 Safari 就足够了其中一部分是了解什么依赖于渲染引擎
使用 librsvg / rsvg 通过 ImageMagick 转换 SVG 图像

我知道这个问题在这里有几个答案版本如下所示 ImageMagick 将 SVG 转换为 PNG 无法在启用 RSVG 的情况下工作 https stackoverflow com questions 11592085 imagemagic
使用 SkiaSharp 在 Xamarin 中加载 SVG 文件

从版本 1 55 0 开始 SkiaSharp 支持读取 SVG 文件该软件包已于几天前发布 2016 年 11 月 10 日但我找不到足够的有关如何使用它的文档需要以下包 SkiaSharp 1 55 0 SkiaSharp 视图和
添加鼠标事件到svg ，检测网格悬停

我有一个有点复杂的问题我正在尝试通过 svg 渲染网格然后将事件侦听器添加到网格中目前我正在通过渲染网格
Jquery 条件适用于除 safari 之外的所有浏览器

在 iPhone 和 iPad 上的 Safari 中我为条件语句设置的选择器不起作用并且会导致每个 ajax 请求出现重复的内容它在 android chrome firefox ie 和桌面版 safari 上运行良好 li mi
SVG 中虚线的悬停事件

带有线或路径的 SVG 使用stroke dasharray当用户将鼠标悬停在虚线的实心部分上时似乎只会触发 CSS 和 JS 悬停事件 https codepen io anon pen YeXoZy https codepen i
如何进行多个 d3 窗口大小调整事件

我有三个svg一页上的元素每个元素都由 D3 陪伴每个都有自己的页面调整大小逻辑由我写的简单模块 https github com TimeMagazine d3 base让他们做出反应问题在于只有最后一个调整大小事件被触发因为
如何缩放 SVG 路径以适应窗口大小？

我在缩放 SVG 以适应窗口大小时遇到了麻烦在这个例子中我有一个波浪路径和一个文本元素我想在这里实现的是沿着波浪路径从左到右移动文本元素这是由GSAP完成的并停在路径的中间在初始负载下当用户开始滚动时它将移至末尾我的问题是
Safari 和 Edge 中的 audioContext.copyToChannel() 替代方案

Safari 和 Edge 都不支持audioContext copyToChannel 函数用自定义内容填充audioBuffer 还有其他方法吗就我而言我想创建一个脉冲响应用该响应填充缓冲区并将一些声音与该缓冲区进行卷积对于
获取SVG绘图的边界框

我想提取 SVG 绘图的边界框由于 Python 已经在系统上可用并且还用于执行其他任务因此我不想使用 JavaScript 或任何其他语言我的理解是是否可以计算单个元素的边界框但我不知道如何计算整个绘图的边界框只是所有元素的最小

随机推荐

下雪时如何输出消息？

我正在 Windows 7 上使用降雪包进行模拟研究我喜欢每运行 10 次就打印一条消息到主 R 控制台来监控进度但它未能这样做 IE 没有打印任何内容任何帮助都感激不尽 runsim function nsim n mean var
生产中的 MongoDB 和 Mongoid

我正在部署我的第一个小应用程序MongoDB and Mongoid作为一名司机在生产中使用 MongoDB 的正确安全方法是什么我的意思是在我刚刚开始的开发中mongod就是这样不需要用户名或密码而且看起来不安全 Mongoid
使用 Azure Devops 发布 Nuget 包

I m trying to create a Release Pipeline in Azure DevOps that will publish a package to Nuget org The build pipeline work
.NET NUnit 测试 - Assembly.GetEntryAssembly() 为 null

当类使用时Assembly GetEntryAssembly 在单元测试中运行 Assembly GetEntryAssembly is null 有没有一些选项如何定义Assembly GetEntryAssembly 在单元测试期间实
列出 Fish/bash shell 中可用的所有别名

有没有办法列出所有别名例如 ls aliases cd la ls Gla gs git stash etc 另外是否可以为别名添加人类可读的描述我使用的是 MacOSX In bash 列出所有别名 alias 要添加注释只需将其放
自 Java 7 update 25 起，Applet.getCodeBase() 对本地 Applet 返回 null

Since Java 7 更新 25 Applet的方法getCodeBase 似乎回来了NULL对于本地小程序我还没有找到任何东西Java 7u25发行说明将宣布解释此更改但我发现电子邮件讨论 http permalink gman
UIAlertView 与 session.dataTaskWithRequest 的问题

我有这段代码可以验证 IAP 收据并且我尝试根据此函数返回的状态显示警报但我不断收到此错误 This application is modifying the autolayout engine from a background th
是否可以在 JavaScript 中链接 setTimeout 函数？

是否可以连锁setTimout函数以确保它们相继运行这里列出了三种不同的方法手动嵌套setTimeout 回调使用可链接的计时器对象 Wrap setTimeout 在承诺和连锁承诺中手动嵌套 setTimeout 回调当然当第
JPA 标准教程 [关闭]

Closed 这个问题正在寻求书籍工具软件库等的推荐不满足堆栈溢出指南 help closed questions 目前不接受答案我一直在尝试寻找 JPA Criteria API 教程但没有取得太大成功你知道有哪些适合初学者的
Xcode 4 代码感知不起作用

我正在 Xcode 4 中运行旧 Xcode 3 项目代码感知不适用于我自己的类我尝试过以下操作清理重建删除派生数据安装4 3文档 Restart 没有任何运气有时代码感觉有效但大多数情况下我只是得到未完成尝试这个打
套接字错误：[Errno 111] Ubuntu 上的连接被拒绝

Traceback most recent call last s smtplib SMTP localhost File usr lib python2 7 smtplib py line 251 in init code msg sel
Fortify 源分析器和 Apache Lenya

我正在尝试将 Fortify 源代码分析器用于我学校的一个研究项目以测试开源 Java Web 应用程序的安全性我目前正在研究 Apache Lenya 我正在使用最新的稳定版本 Lenya v2 0 2 根目录下有一个文件名为buil
使用 querySelectorAll 时，Typescript 对象可能为“null”.ts(2531)

class Test state elements container null constructor container HTMLElement null options permet de prendre les options du
在 C# 中将文本添加到文件的开头和结尾

我有一个进程可以获取一系列 xml 文件我将 xml 放在引号中的原因是文件中的文本没有根元素这会导致 xml 无效在我的处理中我想纠正这个问题并打开每个文件在每个文件的开头和结尾添加一个根节点然后将其关闭这是我的想法但这涉
使用私钥通过 VSCode 连接到主机

我想连接到远程服务器我知道用户名和主机名而且我也有private key pem文件如何使用 VSCode 连接到该虚拟机我在互联网上的解决方案中遇到了这个错误这是合理的因为我还没有导入这个private key pem文件在任
对于没有字段的构造函数，reallyUnsafePtrEquality#

据我了解没有字段的类型的构造函数是静态分配的并且 GHC在所有用途之间共享这些 https stackoverflow com a 3256825 176841 并且GC不会移动这些 https ghc haskell org tr
MD5 是否仍然足以唯一标识文件？

考虑到 MD5 算法的破坏和安全问题等 MD5 散列文件是否仍然被认为是唯一识别该文件的足够好的方法安全性不是我在这里最关心的问题但唯一地标识每个文件才是有什么想法吗是的 MD5从安全角度来说已经被彻底攻破但意外碰撞的概率仍然微乎
对嵌套列表进行排序：从排序中排除第一项[重复]

这个问题在这里已经有答案了 SET 我有一个csv file其中包括我的茶点的当前余额它是逗号分隔的但在本例中逗号为了提高可读性而删除 NAME AMOUNT PRICE Coca Cola 8 1 25 Fanta 6 1 29 D
嵌套集模型，对类别中的项目进行计数

我有一个适用于我的网站的嵌套集模型其中包含子类别等中的项目除了一个我无法解决的问题之外它运行得很好 item id item name 1 Laptop 2 iPod Classic 80GB 3 iPod Classic 160GB
Safari 不尊重 `transform-origin` SVG 属性

我正在尝试使用构建 SVGtransform属性但是虽然我的 SVG 在 Chrome 和 Firefox 中看起来符合预期但在 Safari 中看起来却损坏了看来 Safari 不尊重transform origin属性并始终应用

Safari 不尊重 `transform-origin` SVG 属性

Safari 不尊重 `transform-origin` SVG 属性 的相关文章

随机推荐

热门标签

Safari 不尊重 `transform-origin` SVG 属性的相关文章