Question

我试图解决这个问题，但我无法做到。有谁知道为什么Blogger会这样做？这可以解决吗，博主不会这样做吗？基本上所有我在这里问堆栈流程都希望我添加更多细节。

举个例子：

的此：

<svg width="260" height="260">
    <defs>
      <clippath id="circleView">
        <circle cx="130" cy="130" r="85" fill="orange" />
      </clippath>
    </defs>
    <image x="40" y="40" width="180" height="180" xlink:href="https://i.imgur.com/uuqDlZB.jpg" clip-path="url(#circleView)" />
    <image x="40" y="40" width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png" />

    <svg width="260" height="260">
      <defs>
        <lineargradient id="MyGradient">
          <stop offset="0%" stop-color="transparent" />
          <stop offset="33%" stop-color="transparent" />
          <stop offset="33%" stop-color="#0059dd" />
          <stop offset="34.2%" stop-color="#0059dd" />
          <stop offset="34.2%" stop-color="transparent" />
          <stop offset="68%" stop-color="transparent" />
          <stop offset="68%" stop-color="#0059dd" />
          <stop offset="69.2%" stop-color="#0059dd" />
          <stop offset="69.2%" stop-color="transparent" />
          <stop offset="102%" stop-color="transparent" />
        </lineargradient>
      </defs>

      <rect fill="url(#MyGradient)" x="0" y="0" width="260" height="260" />

    </svg>
  </svg>

成为这个：在Blogger中。

   <svg width="260" height="260">
    <defs>
      <clippath id="circleView">
        <circle cx="130" cy="130" r="85" fill="orange" />
      </circle></clippath>
    </defs>
    <image x="40" y="40" width="180" height="180" xlink:href="https://i.imgur.com/uuqDlZB.jpg" clip-path="url(#circleView)" />
    <image x="40" y="40" width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png" />

    <svg width="260" height="260">
      <defs>
        <lineargradient id="MyGradient">
          <stop offset="0%" stop-color="transparent" />
          <stop offset="33%" stop-color="transparent" />
          <stop offset="33%" stop-color="#0059dd" />
          <stop offset="34.2%" stop-color="#0059dd" />
          <stop offset="34.2%" stop-color="transparent" />
          <stop offset="68%" stop-color="transparent" />
          <stop offset="68%" stop-color="#0059dd" />
          <stop offset="69.2%" stop-color="#0059dd" />
          <stop offset="69.2%" stop-color="transparent" />
          <stop offset="102%" stop-color="transparent" />
        </stop></stop></stop></stop></stop></stop></stop></stop></stop></stop></lineargradient>
      </defs>

      <rect fill="url(#MyGradient)" x="0" y="0" width="260" height="260" />

    </rect></svg>
  </image></image></svg>

Answer 1

尝试使用正确的格式关闭所有代码，Blogger是丰富的格式化网页，因此如果您不关闭任何代码，它会自动执行或修复错误的代码。试试这个

<svg width="260" height="260">
<defs>
  <clippath id="circleView">
    <circle cx="130" cy="130" r="85" fill="orange"></circle>
  </clippath>
</defs>
<image x="40" y="40" width="180" height="180" xlink:href="https://i.imgur.com/uuqDlZB.jpg" clip-path="url(#circleView)"></image>
<image x="40" y="40" width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png"></image>

<svg width="260" height="260">
  <defs>
    <lineargradient id="MyGradient">
      <stop offset="0%" stop-color="transparent"></stop>
      <stop offset="33%" stop-color="transparent"></stop>
      <stop offset="33%" stop-color="#0059dd"></stop>
      <stop offset="34.2%" stop-color="#0059dd"></stop>
      <stop offset="34.2%" stop-color="transparent"></stop>
      <stop offset="68%" stop-color="transparent"></stop>
      <stop offset="68%" stop-color="#0059dd"></stop>
      <stop offset="69.2%" stop-color="#0059dd"></stop>
      <stop offset="69.2%" stop-color="transparent"></stop>
      <stop offset="102%" stop-color="transparent"></stop>
    </lineargradient>
  </defs>

  <rect fill="url(#MyGradient)" x="0" y="0" width="260" height="260"></rect>

</svg>

为什么Blogger不尊重结束标签？

1 个答案: