html - 在我的网站中加入 svg 矩形

标签 html css svg

我应该把下面的代码放在哪里，以便在我的产品周围获得像“https://codepen.io/Zeaklous/pen/kyGqm”这样的动画

<div class="svg-wrapper">
  <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
    <rect class="shape" height="140" width="140" />

  </svg>

css 这是我在我的 css 文件中添加的

.svg-wrapper svg{
    position: absolute;
    top: 0;
    left: 0;
}

.svg-wrapper {

  width: 140px;
    height: 140px;
    position: relative;
    display: inline-block;  
    cursor: pointer;
      margin: 0 auto;

}
.shape {
  stroke-dasharray: 0 540;
  stroke-dashoffset: -474;
  stroke-width: 1px;
  fill: transparent;
  stroke: #000;
  transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
}

.svg-wrapper:hover .shape {
  stroke-width: 2px;
  stroke-dashoffset: 0;
  stroke-dasharray: 900;
}

我要合并上述代码的产品页面如下:

{$number_line = 1}
{$id_lang = Context::getContext()->language->id}

{foreach from=$group_cat_info item=cat_info name=g_cat_info}
 <div class="block-content">
    <div id="wt-prod-cat-{$cat_info.id_cat}" class="row">
        <div class="cat-bar col-sm-12">
          <div class="out-wt-prod">
            {if $cat_info.cat_icon!='' }
            <div class="icon_cat" style="background-color:{$cat_info.cat_color|escape:'html':'UTF-8'}">
               <img src="{$icon_path|escape:'html':'UTF-8'}{$cat_info.cat_icon|escape:'html':'UTF-8'}" alt=""/>
            </div>
            {/if}
            <h3><a href="{$link->getCategoryLink($cat_info.id_cat, $cat_info.link_rewrite)|escape:'html':'UTF-8'}" title="{$cat_info.cat_name|escape:'html':'UTF-8'}">{$cat_info.cat_name|escape:'html':'UTF-8'}</a></h3>
          </div>
        </div>
        {if $group_cat.show_sub == 1}
        <div class="sub-cat wt-col-md-2">
            <ul class="sub-cat-ul">
                {foreach from = $cat_info.sub_cat item=sub_cat name=sub_cat_info}
                    <li><a href="{$link->getCategoryLink($sub_cat.id_category, $sub_cat.link_rewrite)|escape:'html':'UTF-8'}" title="{$sub_cat.name|escape:'html':'UTF-8'}">{$sub_cat.name|escape:'html':'UTF-8'}</a></li>
                {/foreach}
                {if isset($cat_info.special_prod_obj) && count($cat_info.special_prod_obj)}
                    {$cat_product = $cat_info.special_prod_obj}
                    {$id_lang = Context::getContext()->language->id}
                    <li class="wt-prod-special">
                        <a class="product_img_link" href="{$link->getProductLink($cat_product)|escape:'html':'UTF-8'}" title="{$cat_product->name[$id_lang]|escape:'html':'UTF-8'}">
                        <img class="replace-2x img-responsive" src="{$link->getImageLink($cat_product->link_rewrite[$id_lang], $cat_product->id_image, 'home_default')|escape:'html':'UTF-8'}" alt="" title="{$cat_product->name[$id_lang]|escape:'html':'UTF-8'}"/>
                        </a>
                    </li>
                {/if}
            </ul>
        </div>
        {/if}

        <div class="product_list wt-col-md-12 wt-col-sm-12">
            <div class="owl-prod-cat">
                {if isset($cat_info.product_list) && count($cat_info.product_list) > 0}
                {foreach from=$cat_info.product_list item=product name=product_list}
                    {if $smarty.foreach.product_list.iteration % $number_line == 1 || $number_line == 1}

                    <div class="item product-box ajax_block_product">
                    {/if}
                    <div class="product-container">

                      <div class="product-container-hover">
<h5 class="product-name"><a href="{$product.link|escape:'html'}">{$product.name|truncate:25:''|escape:'html':'UTF-8'}</a></h5>  
                        {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
                        <div class="content_price">{hook h='displayProductListFunctionalButtons' product=$product}
                            {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}
                                <span class="price product-price">
                                    {if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}
                                </span>
                                {if isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0}
                                    {hook h="displayProductPriceBlock" product=$product type="old_price"}
                                    <span class="old-price product-price">
                                        {displayWtPrice p=$product.price_without_reduction}
                                    </span>
                                    {hook h="displayProductPriceBlock" id_product=$product.id_product type="old_price"}
                                    {if $product.specific_prices.reduction_type == 'percentage'}
                                        <span class="price-percent-reduction">-{$product.specific_prices.reduction * 100}%</span>
                                    {/if}
                                {/if}

                                {hook h="displayProductPriceBlock" product=$product type="price"}
                                {hook h="displayProductPriceBlock" product=$product type="unit_price"}
                            {/if}
                        </div>
                        {/if}
                        <div class="product-image-container">


                            <a class="product_img_link" href="{$product.link|escape:'html'}" title="{$product.legend|escape:html:'UTF-8'}"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html'}" alt="{$product.legend|escape:html:'UTF-8'}"height="140" width="140" /></a>  
</div> 
                        <div class="">

                            <div class="button-container">     
                                {if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.customizable != 2 && !$PS_CATALOG_MODE}
                                    {if (!isset($product.customization_required) || !$product.customization_required) && ($product.allow_oosp || $product.quantity > 0)}
                                        {capture}add=1&amp;id_product={$product.id_product|intval}{if isset($static_token)}&amp;token={$static_token}{/if}{/capture}
                                        <a class="button ajax_add_to_cart_button btn btn-default" href="{$link->getPageLink('cart', true, NULL, $smarty.capture.default, false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}" data-minimal_quantity="{if isset($product.product_attribute_minimal_quantity) && $product.product_attribute_minimal_quantity > 1}{$product.product_attribute_minimal_quantity|intval}{else}{$product.minimal_quantity|intval}{/if}">
                                            <span>{l s='Add to cart'  mod='wtproductcategory'}</span>
                                        </a>
                                    {else}
                                        <span class="button ajax_add_to_cart_button btn btn-default disabled">
                                            <span>{l s='Out of stock' mod='wtproductcategory'}</span>
                                        </span>
                                    {/if}
                                {/if}
                            </div>
                        </div>
                       </div>
                     </div>

                    {if $smarty.foreach.product_list.iteration % $number_line == 0 ||$smarty.foreach.product_list.last || $number_line == 1}
                    </div>
                    {/if}
                {/foreach}
                {else}
                    <div class="item product-box ajax_block_product">
                        <p class="alert alert-warning">{l s='No product at this time' mod='wtproductcategory'}</p>
                    </div>
                {/if}
            </div>
            {if count($cat_info)>0}
            <div class="manu-list">
                <ul>
                    {foreach from=$cat_info.manufacture item=manu_item name=manufacture}
                        <li><a href="#">{$manu_item->name|escape:'html':'UTF-8'}</a></li>
                    {/foreach}
                </ul>
            </div>
            {/if}
        </div>
    </div>
    </div>
    {if $cat_info.show_img == 1 && isset($cat_info.id_image) && $cat_info.id_image > 0}
    <div class="cat-img">
        <a href="{$link->getCategoryLink($cat_info.id_cat, $cat_info.link_rewrite)|escape:'html':'UTF-8'}" title="{$cat_info.cat_name|escape:'html':'UTF-8'}">
            <img src="{$link->getCatImageLink($cat_info.link_rewrite, $cat_info.id_image, 'category_default')|escape:'html':'UTF-8'}"/>
        </a>
    </div>
    {/if}
    {/foreach}

最佳答案

我不太了解产品页面代码，但是 如果你想要这个用于 menu list 这是代码:

<div class="svg-wrapper">
  <svg height="60" width="320" xmlns="http://www.w3.org/2000/svg">
    <rect class="shape" height="60" width="320" />
                <div class="manu-list">
                <ul>
                    {foreach from=$cat_info.manufacture item=manu_item name=manufacture}
                        <li><a href="#">{$manu_item->name|escape:'html':'UTF-8'}</a></li>
                    {/foreach}
                </ul>
            </div>
  </svg>
</div>

添加到购物车按钮:

<div class="svg-wrapper">
  <svg height="60" width="320" xmlns="http://www.w3.org/2000/svg">
    <rect class="shape" height="60" width="320" />
                            <div class="button-container">     
                                {if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.customizable != 2 && !$PS_CATALOG_MODE}
                                    {if (!isset($product.customization_required) || !$product.customization_required) && ($product.allow_oosp || $product.quantity > 0)}
                                        {capture}add=1&amp;id_product={$product.id_product|intval}{if isset($static_token)}&amp;token={$static_token}{/if}{/capture}
                                        <a class="button ajax_add_to_cart_button btn btn-default" href="{$link->getPageLink('cart', true, NULL, $smarty.capture.default, false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}" data-minimal_quantity="{if isset($product.product_attribute_minimal_quantity) && $product.product_attribute_minimal_quantity > 1}{$product.product_attribute_minimal_quantity|intval}{else}{$product.minimal_quantity|intval}{/if}">
                                            <span>{l s='Add to cart'  mod='wtproductcategory'}</span>
                                        </a>
                                    {else}
                                        <span class="button ajax_add_to_cart_button btn btn-default disabled">
                                            <span>{l s='Out of stock' mod='wtproductcategory'}</span>
                                        </span>
                                    {/if}
                                {/if}
                            </div>
  </svg>
</div>

更新:

在我检查了你的网站并使用页面源代码中的 html 代码之后，我就这样做了

在 img 标签前添加这个

  <div class="svg-wrapper">
 <svg height="140" width="140" xmlns="http://www.w3.org/2000/svg">
<rect class="shape" height="140" width="140" />

并在img标签之后关闭它们

所以结果应该是这样的:

 <a class="product_img_link" href="{$product.link|escape:'html'}" title="{$product.legend|escape:html:'UTF-8'}">
      <div class="svg-wrapper">
     <svg height="140" width="140" xmlns="http://www.w3.org/2000/svg">
    <rect class="shape" height="140" width="140" />
 <img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html'}" alt="{$product.legend|escape:html:'UTF-8'}"height="140" width="140" />
      </svg>
   </div>
 </a>

更新 2:

您必须为 img 标签添加一个填充以使 svg 正常显示， 您将需要添加超过 14 的填充；新的 css 必须在你所有的 css 之后

例如:

img{
padding:15px;
}

关于html - 在我的网站中加入 svg 矩形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41429195/

上一篇：css - 仅在居中的 div 的一侧提供背景颜色

下一篇：带有箭头的 jquery magicline

相关文章：

javascript - 使用 json 数据填充动态表

css - 如何将 Flexbox 与 Web 组件和影子 DOM 一起使用

javascript - 如何使用纯 JavaScript 将元素添加到嵌入式 SVG？

xml - SVG:将掩码应用于路径组 <g> 标记

javascript - 链接到 iOS Safari 的共享菜单

html - 背景图片显示不正确

html - Web api 起始 html 页面

html - 我怎样才能更好地平滑这种悬停效果？

javascript - 当输入聚焦时，悬停菜单不会消失

css - 剪辑路径 url 找不到 id

©2024 IT工具网  联系我们